列表套列表，点击里面列表的操作获取大列表的值

秦悸

已于 2023-01-30 14:06:26 修改

阅读量242

点赞数

分类专栏： vue 文章标签：前端 javascript java

于 2022-10-31 13:52:31 首次发布

本文链接：https://blog.csdn.net/GikQxx21_wen/article/details/127613919

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

当存在两个表格时在第二个表格中获取上一个表格的数据我们 利用子传父的方法
在这里插入图片描述

demo

子组件


-------------结构---------------
<el-table
        data={this.data}
        tooltip-effect="light"
        border={true}
        on-selection-change={val => this.selectionValue(val)}
        ref="domainTable"
        on-row-click={this.onRowClick}
      >
  .........
-------------方法-------------
async onRowClick(row){
      console.log(row,'-----数据');
      let i = this.expandRowKeys.indexOf(row.id)
      if( i >= 0){
        this.$refs.domainTable.toggleRowExpansion(row, false);
        this.expandRowKeys.splice(i,1);
      }else{
        this.loading = row.id;
        await this.lazyLoad(row);
        this.loading = "";
        this.$refs.domainTable.toggleRowExpansion(row, true);
        this.expandRowKeys.push(row.id);
        this.$emit('listScop', row)--------------------把当前行的数据传给父组件------------
      }
    },

父组件

 domainTable(
        :data="tableData",
        :columns="tableLabel",
        :filterWidth="250",
        :innerLabel="innerLabel",
        :lazyLoad="lazyLoad",
        ref="domainTable",
        @listScop="listScop" -----------显示--------------
      )
          span.operation(@click="start(scopeList,scope.row)" :disabled= disabled)
            span 开启缓存
--------------在methods中写listScop事件-------------
listScop(data){
      this.scopeList = data
    },

在data中声明

 data() {
    return {
      scopeList: {},
    };
  },

js

 // 开启缓存
   // 开启缓存
    async start(index,valC) {
      if (valC.enable == 1) {
        this.$message({
          type: "none",
          message: "已经开启缓存",
        });
        this.disabled = true;
      } else {
        await startCache({
          center: this.listQuery.center,
          value: valC.targetUrl,
          realm: index.domainName,
          userName: index.userName,
          userId: index.userId
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "验证成功!",
            });
            this.getData();
          } else {
            this.$message({
              type: "error",
              message: "开启缓存不成功",
            });
          }
        });
      }
    },