Ant design vue中的联动选择取消操作


Posted in Javascript onOctober 31, 2020

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:[],
 rowKeys:[],
 showTip:false // 是否禁止选择(如果最多选择8条)
}
}

页面为

Ant design vue中的联动选择取消操作

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,
 }
}

当我切换了一级下拉框,二级下拉框的数据也重新赋值啦,但是二级下拉框选中的文本依旧没有改变。

Ant design vue中的联动选择取消操作

第一次选了一级“前端开发”,选择了二级“百度小程序”,此时切换一级为“数据库”,二级的数据被重新赋值,但是此时二级的文本依然是之前选择的“百度小程序”。

解决方案

首先怀疑是属于特殊方法操作了数组,导致无法更新数据到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中的联动选择取消操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
javascript中this指向详解
Apr 23 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
详解关于微信setData回调函数中的坑
Feb 18 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 #Javascript
vue中可编辑树状表格的实现代码
Oct 31 #Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 #Javascript
react ant Design手动设置表单的值操作
Oct 31 #Javascript
解决pycharm双击但是无法打开的情况
Oct 31 #Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 #Javascript
antd design table更改某行数据的样式操作
Oct 31 #Javascript
You might like
php中取得URL的根域名的代码
2011/03/23 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
Python常用外部指令执行代码实例
2020/11/05 Python
python3中确保枚举值代码分析
2020/12/02 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
化工机械应届生求职信
2013/11/04 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
python APScheduler执行定时任务介绍
2022/04/19 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers