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 相关文章推荐
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
vue-router 学习快速入门
Mar 01 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
js实现自定义右键菜单
May 18 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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
Protoss建筑一览
2020/03/14 星际争霸
PHP json_decode函数详细解析
2014/02/17 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
python简单的函数定义和用法实例
2015/05/07 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Django实现发送邮件功能
2019/07/18 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
劳资人员岗位职责
2013/12/19 职场文书
初一地理教学反思
2014/01/16 职场文书
食堂个人先进事迹
2014/01/22 职场文书
股权转让协议书
2014/04/12 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
十佳青年事迹材料
2014/08/21 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
MySQL通过binlog恢复数据
2021/05/27 MySQL
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫