vue与antd of vue table内容

一.HTML部分

 <a-table
          :columns="columns"
          :data-source="rightData"
          :loading="loading"
          :rowKey="(record) => record.id"
          childrenColumnName="children"
          :pagination="false"
          :row-selection="{ selectedRowKeys: selectedRowKeys, selectedRows:selectedRows,onChange: handleSelectChange,type:'radio'}"
        >
          <span slot="type" slot-scope="text">{{ text | typeStatusFilter }}</span>
        </a-table>

二、树形结构
1.初始化数据

columns: [
        // { title: '', dataIndex: 'other', width: 150 },
        { title: '权限名称', dataIndex: 'title',align:'left'},
        { title: '排序编码', dataIndex: 'sort'},
        { title: '路径', dataIndex: 'url'},
        { title: '程式类型', dataIndex: 'type',scopedSlots: { customRender: 'type' } },
        { title: '描述', dataIndex: 'description'}
      ], //列表

rightData: [], //列表数据
loading:false

2.使用递归请求数据列表

getRightData: async function (id) {
      this.loading = true
      let { data } = await getRightData({ pid: id})
      this.loading  = false
      data.map(async item => {
        if (item.state == 'closed') {
          item['children'] = await this.getRightData(item.id)
        }
      })
      return data
    },

3.渲染完成后在mounted中调用

    async mounted() {
	    let rightData = await this.getRightData(0)
	    this.rightData = rightData
    },

三、表格的选中功能
1.html 中

:row-selection="{ selectedRowKeys: selectedRowKeys, selectedRows:selectedRows,onChange: handleSelectChange,type:'radio'}"

2.初始化数据

selectedRowKeys: [],
selectedRows:[],

3.选中的数据

handleSelectChange(selectedRowKeys,selectedRows){
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }

四、table的插槽使用方法以及过滤的使用
1.在table中插入

<span slot="type" slot-scope="text">{{ text | typeStatusFilter }}</span>

2.初始化数据

export default {
	data(){
		return {
			columns:[
				{ title: '程式类型', dataIndex: 'type',scopedSlots: { customRender: 'type' } },
			]
		}
	}
}

3.定义过滤的数据

const smsType = {
  0: {
    status: 'M',
    text: '菜单',
  },
  1: {
    status: 'O',
    text: '操作',
  },
}
export default {
  name: '',
  data() {
return {
      expandedRowKeys: [],
      innerData: [],
      value: undefined,
      columns: [
        { title: '程式类型', dataIndex: 'type',scopedSlots: { customRender: 'type' } },
      ], //列表

4.过滤器

filters: {
    typeStatusFilter(type) {
      if (type == 'M') {
        return smsType[0].text
      } else {
        return smsType[1].text
      }
    },
  },