Ant design vue中的联动选择取消操作
程序员文章站
2022-06-22 11:53:56
项目中会遇到需求就是table表格中选中在侧边展示，侧边删除，table中选中取消的联动选中ui框架：ant design vue组件：table 和 taghtml中
项目中会遇到需求就是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)
}
})
},
补充知识：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,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中的联动选择取消操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： 数据库操作之DBUtils