适用场景:主要用于修改功能,需要打开新页面,新增时选择的某几条需要勾选显示出来,方便修改。

(ps:我只是实现了,但具体为什么说不出来,记录一下是为了下次方便用。。。。)

一、默认选中的<el-table 编写

<el-table   @selection-change="handleSelectionChange"

                      ref="multipleTable"
                       :row-key="getRowKeys"   >

这三个是必备的

handleSelectionChange  是多选框选中数据的方法,是若依自带的

二、handleSelectionChange  方法

 handleSelectionChange(selection) {
      this.ids = selection.map(item => item.你要用的字段名)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

三、getRowKeys方法

getRowKeys(row){
      return row.你要用的字段名
    },

四、选择框编写

 <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />

:reserve-selection="true"    别忘了加

五、修改方法编写

async  handleUpdate(row) {
      await   get(row.主表主键).then(response => {
        this.List = response.data;
        for (let i=0; i<this.List.length; i++) {
          this.List2[i]=(this.List[i].子表主键)
        }
      });
      await   this.selsetYiJin()
    },

这里要解释几点:

1.async    await    异步处理(具体自行百度) 总之目的是为了让程序按顺序执行,不然会出现前面方法的执行结果还没出来,下一个方法要用但数据为空导致执行失败的问题

2.逻辑说一下:

(1)先根据你选择要修改那条数据的主表主键去找到已选中的信息 this.List

(2)循环得到已选中信息this.List的子表主键,保存到 this.List2 里

六、selsetYiJin()  方法编写
      selsetYiJin(){
        this.$nextTick(() => {
        if (this.List2 != ""){
          for (let j=0;j<this.List0.length;j++){
            if (this.List2.indexOf(this.List0[j].name) >= 0){
              this.$refs.multipleTable.toggleRowSelection(this.List0[j]);
            }
          }
        }
      })
    },

这里要解释几点:

1.最主要的句子 this.$refs.multipleTable.toggleRowSelection(this.List0[j]);

2.this.List0  是可选择的全部数据

一共三个表,一个可选择的全部信息表,一个用户表,一个用户选择信息关系表

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐