今天就跟大家聊聊有關Ant design vue中實現聯動選擇取消，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
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)
}
})
},補充知識：ant-design-vue的select二級聯動，聯動文本不更新的解決辦法
前言
有了需要改動祖傳代碼項目需求：把之前的select改成二級聯動。項目使用了ant-design-vue，數據為[{"id":1,"name":"前端開發"}]
問題描述
<a-form :form="form" @submit="handleCreateMenuSubmit">
<a-select placeholder="請選擇技術領域" @change="handleNoteCategoryChange">
<a-select-option v-for="item in note_category" :key="item.id">
{{ item.name }}
</a-select-option>
</a-select>
<a-select 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,0,{"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中實現聯動選擇取消有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
