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:[],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中的聯動選擇取消操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。