Table(slot插槽)惯例操作
一、scopedSlots属性
const columns =[ ... "scopedSlots": { "customRender": "field" //field须要与dataIndex字段对应 }, ] 页面里 <a-table> ... <div slot="field" slot-scope="text" style="color: red">{{text}}</div> </a-table> 文档：https://www.antdv.com/compone...
动静slot插槽
一、区别
以往页面哪列操作字段就写死在页面里，动静是field字段不确定，留给用户本人配置。
二、columns中的json很要害
1、colProperty能够了解为columns索引，数据有多少列即colProperty就有多长。因为波及到多表头，当遇到children上面的字段就没办了。
2、cols才是表头显示内容，外面有scopedSlots于其余属性。
"colProperty": [ { "sorter": "0", "scopedSlots": 0, "dataIndex": "C1", "width": "100", "fixed": "false", "title": "字段一", "align": "center" }, { "sorter": "0", "scopedSlots": 1, "dataIndex": "C2", "width": "100", "fixed": "false", "title": "字段二", "align": "center" } ], "cols": [ { "sorter": false, "dataIndex": "C1", "width": 100, "fixed": false, "title": "字段一", "align": "left", "className": "notshow" }, { "sorter": "(a, b) => a.C2 - b.C2", "scopedSlots": { "customRender": "C2" }, "dataIndex": "C2", "width": 100, "fixed": false, "title": "字段二", "align": "left" } ], 三、操作
1、在a-table里的columns为this.columns.cols
<a-table :columns="cols">...</a-table>2、在computed写一个事件，columnsCustom是给插槽循环用
computed: { columnsCustom() { return this.columns.colProperty.filter(item => { return item }) },},3、slot插槽里的写法,依据判断colProperty里的scopedSlots(当然你设置type也行)是否开启个性化配置该列。
<div v-for="(item, index) in columnsCustom" :key="index" :slot="item.dataIndex" slot-scope="text"> <div v-if="item.scopedSlots == '1'"> <div style="color: red">{{text}}</div> </div> <div v-if="item.scopedSlots == '0'">{{text}}</div></div>总结
1、json配置最为要害须要建设一个列索引。
2、须要computed里对插槽做事件便于循环，因为下面说了，对于多表头惯例写法根本有效。