Table 表格
展示行列數(shù)據(jù)。
何時使用
當有大量結(jié)構(gòu)化的數(shù)據(jù)需要展現(xiàn)時；
當需要對數(shù)據(jù)進行排序、搜索、分頁、自定義操作等復(fù)雜行為時。
最近在寫
vue+antd的框架，遇到一個需求：就是要實現(xiàn)table表格的動態(tài)列，并且相應(yīng)的表頭要實現(xiàn)下拉選擇的效果，最后點擊保存時，要將下拉的內(nèi)容拼接到對應(yīng)的列上面去。
在Table中，dataSource和columns里的數(shù)據(jù)都需要指定key值。對于dataSource默認將每列數(shù)據(jù)的key作為唯一標識。
如果數(shù)據(jù)中沒有這個屬性，務(wù)必使用rowKey來指定數(shù)據(jù)列的主鍵。如果沒有指定，控制臺會出現(xiàn)缺少key的提示，表格組件也會出現(xiàn)各類奇怪的錯誤。
效果圖
上面的[序號，物料名稱，型號，品牌，封裝，參數(shù)，位號，供料方式，單片用量，需求用量，類目，類別，SMT套數(shù)]都是固定列
動態(tài)列是上圖中紅框框住的部分
table組件實現(xiàn)動態(tài)列
先看數(shù)據(jù)結(jié)構(gòu)：
要求：根據(jù)第一條數(shù)據(jù)中的noBelongCols字段，創(chuàng)建動態(tài)列。
1.tableList：table表格列表數(shù)據(jù)
2.noBelongCols：動態(tài)列參數(shù)，長度就是動態(tài)列的長度
3.noBelongTypes：表頭的下拉列參數(shù)
changeColumns(){
let noBelongCols =
this.tableList && this.tableList[0] && this.tableList[0].noBelongCols;
console.log('noBelongCols', noBelongCols, this.columns);
this.noBelongCols = noBelongCols;
this.noBelongTypes = [];
noBelongCols &&
noBelongCols.forEach((be, index) => {
this.columns.push({
slots: { title: '無主列' + index },
type: 'string',
dataIndex: '無主列' + index,
width: 110,
scopedSlots: { customRender: '無主列' + index },
});
this.noBelongTypes.push(undefined);
this.tableList.forEach((table) => {
table['無主列' + index] = table['noBelongCols'][index];
});
});
this.columns.push({
title: '操作',
scopedSlots: { customRender: 'action' },
align: 'center',
width: 60,
fixed: 'right',
});
}
table組件表頭自定義——slots: { title: ‘無主列’ + index }
由于動態(tài)列的長度不固定，因此需要用v-for進行遍歷，遍歷出多列。
v-for="(be, bIndex) in noBelongCols" :key="bIndex" :slot="'無主列' + bIndex"
<a-table
:rowKey="(r, i) => i.toString()"
:columns="columns"
:dataSource="tableList"
>
<div
v-for="(be, bIndex) in noBelongCols"
:key="bIndex"
:slot="'無主列' + bIndex"
>
<a-select v-model="noBelongTypes[bIndex]" style="width: 100px">
<a-select-option
v-for="item in titleOptions"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</div>
</a-table>
表格頭部自定義的處理方法：
1.使用slots:{title:'無主列'}
自定義表頭：
slots:{title:'無主列'+index}
自定義表格內(nèi)容：scopedSlots:{customRender:'無主列'+index}
遍歷動態(tài)列的時候，設(shè)置自定義表頭和自定義表格內(nèi)容
this.columns.push({
slots: { title: '無主列' + index },
type: 'string',
dataIndex: '無主列' + index,
width: 110,
scopedSlots: { customRender: '無主列' + index },
});
2.在table組件中使用slot='xxxx'的方式來處理
最終代碼如下：
<div
v-for="(be, bIndex) in noBelongCols"
:key="bIndex"
:slot="'無主列' + bIndex"
>
<a-select v-model="noBelongTypes[bIndex]" style="width: 100px">
<a-select-option
v-for="item in titleOptions"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</div>
完成！！！多多積累，多多收獲！??！
下面內(nèi)容與文章相關(guān)不大，只是為了湊字數(shù)，可忽略?。?！
table組件，主要用于大量結(jié)構(gòu)化的數(shù)據(jù)需要展現(xiàn)時使用，在各端應(yīng)用開發(fā)中使用非常廣泛，達到幾乎必用的地步。在原生ios開發(fā)中，通常需要自定義cell來進行數(shù)據(jù)的展示，antd 的table組件功能相當強大，能實現(xiàn)的功能覆蓋范圍也相當廣泛，本文只是簡單介紹一下最基本的用法，有興趣的可以直接去官網(wǎng)上看，示例更豐富，而且都帶有效果展示。
首先，指定表格的數(shù)據(jù)源 dataSource 為一個數(shù)組：
在數(shù)據(jù)較多，會自動分頁展示，每一列會根據(jù)內(nèi)容的長度自動撐長，上手使用非常簡單，通常PC上對表格會有一些編輯等操作，在原生ios中需要自己布局、定義方法等一系列操作，antd table則只需要在列名稱中添加鏈接就好：
自定義andt table表格樣式的方式也比較多，上述方法可能會引起全局改變，如果只是改變代碼中一個table，則需要注意以下。以上只是介紹的最最最基礎(chǔ)的用法，還有很多高級一些的方法大家可以去官網(wǎng)細看。文章來源：http://www.zghlxwxcb.cn/news/detail-697977.html
值得一提的是，表格的樣式是默認的，需要修改的話要自己改變樣式，可以參考以下方法：文章來源地址http://www.zghlxwxcb.cn/news/detail-697977.html
.ant-table{
:global {
width: 98%;
margin-left: 1%;
.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
padding: 6px 8px !important;
}
.ant-table-thead > tr > th {
background-color: #242542;
color: white;
}
.ant-table-thead > tr > th:hover {
background-color: #535781;
}
.ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
background: rgb(201, 223, 11);
}
.ant-table-content {
background-color: #343655;
color: white;
}
.ant-table-tbody > tr:hover > td{
background-color:rgba(106, 178, 245, 0.5) ! important;
}
}
}
到了這里，關(guān)于vue+antd——table組件實現(xiàn)動態(tài)列+表頭下拉選擇功能——技能提升的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
