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

(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  是可选择的全部数据

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

GitHub 加速计划 / vu / vue
85
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 3 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐