antd-vue中table用法心得

  const columns = [
    {
        title: '等级',
        dataIndex: 'degree',
        key: 'degree',
        scopedSlots: { customRender: 'degree' },
    }, {
        title: '告警名称',
        dataIndex: 'name',
        key: 'name',
        scopedSlots: { customRender: 'name' },
    }, {
        title: '受影响范围',
        key: 'area',
        dataIndex: 'area',
        scopedSlots: { customRender: 'area' }, //在某一列中，可以通过配置scopedSlots这个属性来配置支持slot-scope的属性
    }, {
        title: '处理时间',
        key: 'time',
        dataIndex: 'time',
        // scopedSlots: { customRender: 'time' },
    },{
        title: '操作',
        key:'operator',
        dataIndex:'operator',
        scopedSlots: { customRender: 'operator' }
    }
    ];

1.首先定义表格的所有列的数据，其中scopedSlots官方解释说在某一列中，可以通过配置scopedSlots这个属性来配置支持slot-scope的属性，

大致的意思就是某一列通过使用了scopedSlots这个属性之后在table中
<a-table :columns="columns" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :pagination="false"
                 :scroll="{y: 600 }">
            <span slot="degree" slot-scope="tags">
                <a-tag v-for="tag in tags"  :color="tagColor(tags)">{{tag}}</a-tag>
            </span>
            <span slot="name" slot-scope="names,record">
                <a v-for="name in names"  @click="showDrawer(record)">{{name}}</a>
            </span>
            <span slot="operator" slot-scope="text, record">
              <a href="javascript:;"  @click="showConfirm(record)">{{record.state === 1?'':'处理'}}</a>
            </span>
</a-table>
可以通过对其中一列的数据自定义，比如我们并没有对操作这一列进行赋值如下图所示，因此我们就可以通过
<span slot="operator" slot-scope="text, record">
           <a href="javascript:;"  @click="showConfirm(record)">{{record.state === 1?'':'处理'}}</a>
 </span>
 对操作这一列的数据进行自定义的处理

2.如图所示中等级的那一列，数据是通过循环遍历出来的，假如我们希望对其中文字内容的不一样显示不一样的背景色，

 <span slot="degree" slot-scope="tags">
            <a-tag v-for="tag in tags"  :color="tagColor(tags)">{{tag}}</a-tag>
  </span>
  假如不用tag标签可以用:class=“...."进行设置
  data(){
  	return {
  		 tagColor:function (name) {
                    if(name[0] === '一般'){
                        return '#f50'
                    }else if(name[0] === '紧急'){
                        return '#C60000'
                    }
                },
  	}
  }
  通过以上这种方式就可以达到如上图所示的效果

3.当我们点击处理的时候，希望得到当前行的数据

<span slot="operator" slot-scope="text, record">
           <a href="javascript:;"  @click="showConfirm(record)">{{record.state === 1?'':'处理'}}</a>
 </span>
 其中的record就是当前行的数据

这一步主要参考了