用户登录
用户注册

分享至

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

  • 作者: 游走的流浪汉
  • 来源: 51数据库
  • 2021-10-16

项目中会遇到需求就是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中的联动选择取消操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

软件
前端设计
程序设计
Java相关