element点击获取指定单元格 @cell-click精确到每一格

element获取指定单元格

官网链接@cell-click
https://element.eleme.cn/#/zh-CN/component/table#table-events/.

点击单元格 精确到每一格
需要注意show和isSubmit

// An 
 <el-row>商品信息</el-row>
    <div style="padding: 10px 0 20px 20px">
      <el-table
        border
        :data="dataList"
        @cell-click="handleCellClick"
        style="width: 100%"
        :headerCellStyle="{
          fontSize: '13px',
          padding: '8px 5px',
          fontWeight: '400',
        }"
      >
        //需要显示input框的单元格
       <el-table-column header-align="center" align="center" label="佣金">
          <template slot-scope="scope">
            <span v-if="scope.row.show1">
              <el-input
              //规则,
                @blur="changeCommission(scope.row, scope.$index)"
                v-model="scope.row.commission"
                placeholder="请输入"
                clearable
              ></el-input>
            </span>
            <span v-else>{{ scope.row.commission }}</span>
          </template>
        </el-table-column>
      </el-table>
        <div class="button-live-div">
      <el-button type="danger" @click="dataFormSubmit" :disabled="!isSubmit">审核通过</el-button>

      <el-button type="primary" @click="backList" :disabled="!isSubmit">审核驳回</el-button>
    </div>
  </div>

 methods: {
    // 详情页
    getListInfo() {
      // 列表数据
      liveappDetail({ applyId: this.distrcoreId }).then((res) => {
        if (res.code == "0000000") {
          this.editForm = { ...res.data.liveGroupStage }; //基本信息
          this.editForm.planTime = this.editForm.planBeginTime && this.editForm.planEndTime
          ? new Date(editForm.planBeginTime).format("yyyy-MM-dd hh:mm:ss") + '~' + new Date(editForm.planEndTime).format("yyyy-MM-dd hh:mm:ss")
          : ""
          // 循环添加show的状态，根据show来决定显示span还是input框
          res.data.liveGroupStageProd.map((item, index) => {
            item.show1 = false;
            item.show2 = false;
            item.show3 = false;
            item.show4 = false;
            item.show5 = false;
            item.show6 = false;
            item.index = index;
            return item;
          });
          this.dataList = res.data.liveGroupStageProd;
          console.log(this.dataList);
        }
      });
    },

 // 点击判断显示
    handleCellClick(row, column, cell, event) {
      //判断表头，根据不同的表头展示不同的input
      if (column.label == "佣金") {
        row.show1 = true;
        // 需要注意row是什么
        this.$set(this.dataList, row.index, row);
        console.log(row);
        return false;
      } ,
       //佣金input失去焦点发送请求
    changeCommission(row, index) {
      var reg = /^[+-]?[0-9]+(\.[0-9]{1,4})?$/;
      // test检测   检测是包含否匹配字符串 布尔值
      if (reg.test(row.commission) && row.commission) {
        row.show1 = false;
        // 虽然可以新增属性，但是不会触发视图更新
        // 原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。
        // 因为 Vue.js 在初始化实例时将属性转为 getter/setter，
        // 所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
        // 要处理这种情况，我们可以使用$set()方法

        // mounted () {  this.data   key value
        // this.$set(this.student,"age", 24)
        // }
        this.$set(this.dataList, index, row);
      } else {
        this.$message.warning("第" + (index + 1) + "佣金不能为空且是数字");
      }
    },

效果如下图