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 相关文章推荐
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
实例解析Array和String方法
Dec 14 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
JavaScript执行机制详细介绍
Dec 06 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python pymongo模块用法示例
2018/03/31 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
Delphi笔试题
2016/11/14 面试题
工程管理造价应届生求职信
2013/11/13 职场文书
求职信模版
2013/11/30 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书