element表格指定列的内容修改

element表格指定列的内容修改

实现效果：当双击表格中该列内容的任何一个表格项时，弹出框修改这一项，并且传给后端。
组件：el-table和el-dialog
实现思路：表格中绑定cell-dblclick事件（当某个单元格被双击击时会触发该事件）定位到该列，并且弹出弹出框实现修改
代码：

<el-table
        v-loading="dataListLoading"
        :data="dataList"
        ref="multipleTable"
        :row-key="getRowKeys"
        border
        :header-cell-style="{ background: '#17b3a3' }"
        @selection-change="dataListSelectionChangeHandle"
        @cell-dblclick="tbCellDbllCick"
        style="width: 100%; margin-top: -5px"
        max-height="1000px"
      >
      <el-table-column prop="id" label="ID" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="code"
          label="编码"
          header-align="center"
          align="center"
        ></el-table-column>
  </el-table>
  <el-dialog title="修改编码" :visible.sync="updateCodeVisible" width="30%" @close="closeHandle()" append-to-body>
        <el-form ref="form" :model="form" :rules="dataRule" label-width="120px">
          <el-form-item label="编码" prop="code">
            <el-input v-model="form.code"></el-input>
            <span style="color: orange">格式：如果需要填多个编码，请用 & 连接</span>
          </el-form-item>
        </el-form>
        <template slot="footer">
      <el-button @click="closeHandle()">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
      </el-dialog>
      export default {
      data() {
      	return {
      	form:{
        id: "",
        code: "",
      },
      updateCodeVisible: false, //允许修改编码
      }
     }
   computed: {
    dataRule(){
      return {
        code: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      }
    }
  },
  methods: {
  //修改东莞物料弹窗显示
    tbCellDbllCick(row, column, cell, event){
    //找到表格中编码这一列
      if(column.label=="编码"){ 
        // console.log('row',row);
        this.form.id = row.id;
        this.form.code= row.code;
        this.updateCodeVisible = true;
      }
    },
    //取消修改
    closeHandle(){
      this.form.code = "";
      this.$refs.form.resetFields();
      this.updateCodeVisible = false;
    },
    //确定修改，提交
    dataFormSubmitHandle: debounce(
      function () {
         this.$refs["form"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.$http
          .get("...(接口名)", {params: {
            id: this.form.id,
            code: this.form.code,
          }})
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.updateCodeVisible = false;
                this.query(); //刷新列表
              },
            });
          });
        // console.log(this.form);
         
      })
      }
    ),
    }
      ```