專案中會遇到需求就是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:[],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)
  }
  })
 },

補充知識：ant-design-vue的select二級聯動，聯動文字不更新的解決辦法

前言

有了需要改動祖傳程式碼專案需求：把之前的select改成二級聯動。專案使用了ant-design-vue，資料為[{"id":1,"name":"前端開發"}]

問題描述

<a-form :form="form" @submit="handleCreateMenuSubmit">
 <a-select style="width:50%" placeholder="請選擇技術領域" @change="handleNoteCategoryChange">
 <a-select-option v-for="item in note_category" :key="item.id">
{{ item.name }}
 </a-select-option>
 </a-select>
 <a-select style="width:50%" placeholder="請選擇分類" ref="note_category2" @change="handleNoteCategoryChange2">
 <a-select-option v-for="item in note_category2" :key="item.id">
{{ item.name }}
 </a-select-option>
 </a-select>
 <a-form-item label="簡介">
 <a-textarea
placeholder="如：產品設計與研發"
v-decorator="['description']"
:auto-size="{ minRows: 2,maxRows: 4 }"
 />
 </a-form-item>
</a-form> 


handleNoteCategoryChange(value,option) {
 Axios.post(this.userData.noteUrl + 'get_note_category_by_pid',{
 pid: value
 })
 .then((res) => {
 if (res.data.code == 1) {
 this.note_category2 = res.data.data;
 } else if(res.data.code == 0) {
 this.note_category2 = [];//獲取成功，但是資料為空
   this.note_category2Id = -1,} else {
 this.$message.error(res.data.msg);
 }
 })
 .catch(() => this.$message.error('請檢查網路後重試'));
},handleNoteCategoryChange2(value,option) {
 this.note_category2Id = value;
},//-------------------------------
data(){
 return {
  note_category: [],note_category2: [],note_category2Id: -1,}
}

當我切換了一級下拉框，二級下拉框的資料也重新賦值啦，但是二級下拉框選中的文字依舊沒有改變。

第一次選了一級“前端開發”，選擇了二級“百度小程式”，此時切換一級為“資料庫”，二級的資料被重新賦值，但是此時二級的文字依然是之前選擇的“百度小程式”。

解決方案

首先懷疑是屬於特殊方法操作了陣列，導致無法更新資料到UI，於是使用this.$forceUpdate()強制渲染。但是結果不如意，沒效果。

然後使用了this.$set(this.note_category2,{"id":0,"name":"請選擇分類"})，但是依然沒有效果。

難受，使用了最原始簡單暴力的方法，直接修改文字吧。程式碼如下：

 handleNoteCategoryChange(value,option) {
 console.log(value);
 // 獲取note_category筆記分類
 Axios.post(this.userData.noteUrl + 'get_note_category_by_pid',{
 pid: value
 })
 .then((res) => {
 if (res.data.code == 1) {
  this.note_category2 = res.data.data;
 } else if(res.data.code == 0) {
  this.note_category2 = [];
  this.note_category2Id = -1;
  if (this.$refs.note_category2.$el.children[0].children[0].children[1]) {
this.$refs.note_category2.$el.children[0].children[0].children[1].innerText = '請選擇分類';
  }
 } else {
  this.$message.error(res.data.msg);
 }
 })
 .catch(() => this.$message.error('請檢查網路後重試'));

 },

不愉快的收工。不知道大家有沒有遇到這樣的問題，最後還望大家給出更好的方案解決！

以上這篇Ant design vue中的聯動選擇取消操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。