List within list, click on the operation of the list inside to get the value of the large list

When there are two tables, we get the data of the previous table in the second table利用子传父的方法
Insert image description here

demo

Subassembly

-------------结构---------------
<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)--------------------把当前行的数据传给父组件------------
      }
    },
parent component
 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
    },  

declared in 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: "开启缓存不成功",
            });
          }
        });
      }
    },

Guess you like

Origin blog.csdn.net/GikQxx21_wen/article/details/127613919