首页 >> js开发 >> jsAnt design vue中的联动选择取消操作js大全
jsAnt design vue中的联动选择取消操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
项目中会遇到需求就是table表格中选中在侧边展示，侧边删除，table中选中取消的联动选中ui框架：Ant design vue组件：table 和 taghtml中
deleteDataType(tag.id)">{{tag.title}}
:rowSelection="rowSelection()"
:columns="columns"
:dataSource="filterTypeData"
:pagination="paginationProps" :scroll='{y:455}' >
deleteDataType(tag.id)">{{tag.title}}
:rowSelection="rowSelection()"
:columns="columns"
:dataSource="filterTypeData"
:pagination="paginationProps" :scroll='{y:455}' >
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条）
}
}
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
}
}
}
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)
}
})
},
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二级联动，联动文本不更新的解决办法补充知识：补充知识：ant-design-vue的select二级联动，联动文本不更新的解决办法前言前言有了需要改动祖传代码项目需求：把之前的select改成二级联动。项目使用了ant-design-vue，数据为[{"id":1,"name":"前端开发"}]问题描述问题描述
{{ item.name }}
{{ item.name }}
placeholder="如：产品设计与研发"
v-decorator="['description']"
:auto-size="{ minRows: 2, maxRows: 4 }"
/>
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,
}
}
{{ item.name }}
{{ item.name }}
placeholder="如：产品设计与研发"
v-decorator="['description']"
:auto-size="{ minRows: 2, maxRows: 4 }"
/>
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('请检查网络后重试'));
},
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中的联动选择取消操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
deleteDataType(tag.id)">{{tag.title}}
:rowSelection="rowSelection()"
:columns="columns"
:dataSource="filterTypeData"
:pagination="paginationProps" :scroll='{y:455}' >
{{list.name}}
{{list.content}}
deleteDataType(tag.id)">{{tag.title}}
:rowSelection="rowSelection()"
:columns="columns"
:dataSource="filterTypeData"
:pagination="paginationProps" :scroll='{y:455}' >
{{list.name}}
{{list.content}}
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条）
}
}
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
}
}
}
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)
}
})
},
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二级联动，联动文本不更新的解决办法补充知识：补充知识：ant-design-vue的select二级联动，联动文本不更新的解决办法前言前言有了需要改动祖传代码项目需求：把之前的select改成二级联动。项目使用了ant-design-vue，数据为[{"id":1,"name":"前端开发"}]问题描述问题描述
{{ item.name }}
{{ item.name }}
placeholder="如：产品设计与研发"
v-decorator="['description']"
:auto-size="{ minRows: 2, maxRows: 4 }"
/>
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,
}
}
{{ item.name }}
{{ item.name }}
placeholder="如：产品设计与研发"
v-decorator="['description']"
:auto-size="{ minRows: 2, maxRows: 4 }"
/>
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('请检查网络后重试'));
},
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中的联动选择取消操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
刚刚发布热门点击发布时间
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
