antd-design-vue Table(slot插槽)动态单元列个性化样式操作

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、slot插槽里的写法,根据判断this.columns.colProperty里的scopedSlots(当然你设置type也行)是否开启个性化配置该列。

<div
  v-for="(item, index) in colProperty"
  :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配置最为关键需要建立一个列索引。即数据有多少列，索引就多长。