Ant design vue中的联动选择取消

项目中会遇到需求就是table表格中选中在侧边展示，侧边删除，table中选中取消的联动选中
ui框架：Ant design vue
组件：table 和 tag
html中

 <template v-for="tag in dataType">
    <!-- key不能使用index -->
    <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag.id)">{{tag.title}}</a-tag>
</template>
<a-table 
 :rowSelection="rowSelection()" 
 :columns="columns" 
 :dataSource="filterTypeData" 
 :pagination="paginationProps" :scroll='{y:455}' >
    <template slot="dataName" slot-scope="dataName">
      <div v-for="(list,index) in dataName" :key='index'>{{list.name}}</div>
    </template>
    <template slot="description" slot-scope="description">
       <div v-for="(list,index) in description" :key='index'>{{list.content}}</div>
       </template>
</a-table>

js代码
在table中如果想要某个单元格里面是呈现两行或者两行以上，那么就添加template 让slot=命名，将数据循环遍历就可以呈现了

data:{
return{
	const columns = [
	  {
	    title: '数据类型',
	    dataIndex: 'dataTypeName',
	    width: '15%'
	  },
	  {
	    title: '数据名称',
	    dataIndex: 'dataName',
	    width: '15%',
	    scopedSlots: { customRender: 'dataName' }
	  },
	  {
	    title: '数据描述',
	    dataIndex: 'description',
	    scopedSlots: { customRender: 'description' }
	  }
	],
	rowKeys:[],
	dataType:[],
	changeDataType:[],
	addDataType:[],
	rowKeys:[],
	showTip:false // 是否禁止选择（如果最多选择8条）
}
}

页面为

rowSelection() {
      // const selectedRowKeys = this.selectedRowKeys
      const self = this
      return {
        columnTitle: '选择',   // 去掉头部全选框
        hideDefaultSelections: true,
        // selections: { key: 1 },
        selectedRowKeys: self.rowKeys,  //  选中的key值
        onChange: (selectedRowKeys, selectedRows) => {
          // 勾选改变触发事件
          if (selectedRows.length <= 7) {
            self.changeDataType = selectedRows
            self.addDataType()
            this.showTip = false
          } else {
            // self.$message.error('数据最多选择8个')
            this.showTip = true
          }
        }
      }

在table中插入选择框，想要将头部全选框去掉直接在rowSelection中设置columnTitle: ‘选择’；selectedRows是勾选中的数组集合，selectedRowKeys是选中内容中的key值，可以通过将id设置成key就可以了
如果要做到连动选择，其主要的就是selectedRowKeys和selectedRows，将勾选的selectedRows赋值给侧边的数据

deleteDataType(removedTag) {
      // 侧边数据删除
      const { rowKeys } = this
      const newArr = []
      this.rowKeys = []
      // tag标签close事件是diaplay:none到dome元素上，所有需要用到afterClose  key不能使用index，否则删除事件有问题
      const tags = this.dataType.filter(tag => tag.id !== removedTag)
      this.dataType = tags
      rowKeys.forEach(list => {
        if (list !== removedTag) {
          newArr.push(list)
        }
      })
      this.rowKeys = [...newArr]
    },
addDataType() {
      // 勾选列表数据
      this.dataType = []
      this.rowKeys = []
      console.log(this.changeDataType)
      this.changeDataType.forEach(list => {
        if (list.templateItemId && list.selectItem) {
          // 初始化的时候
          this.dataType.push({ title: list.dataTypeName, id: list.templateItemId })
          this.rowKeys.push(list.templateItemId)
        }
        if (list.key) {
          // 点击多选的时候
          this.dataType.push({ title: list.dataTypeName, id: list.key })
          this.rowKeys.push(list.key)
        }
      })
    },