el-table实现双击编辑-el-select选择框+输入框限制非负两位小数

data定义

  data() {
    return {
      tableData: [],
      editingProp: "",
      currentRowIndex: null,
    };

表格区域

      <!-- 表格区域 -->
      <el-table :data="tableData" border fit size="mini" :header-cell-style="tableHeaderColor"
        :cell-style="tableCellColor" @cell-dblclick="cellDblClick">
        <el-table-column label="编号" prop="myNo" width="120" :render-header="renderRequiredHeader">
          <template v-slot="scope">
            <el-input v-if="
              scope.row.isEdit &&
              editingProp === 'myNo'
            " maxlength="20" v-model="scope.row.myNo" @change="cellChangeFn(scope.row)" size="mini"
              @blur="cellBlur(scope.row)" />
            <span v-else>
              {{ scope.row.myNo }}
            </span>
          </template>
        </el-table-column>
                <el-table-column label="时段" prop="time" width="100" >
              <template v-slot="scope">
                <el-select v-show="scope.row.isEdit &&
                  editingProp === 'time'   
                  " v-model="scope.row.time" size="small" placeholder="请选择"                            @blur="cellBlur(scope.row)"
                  @change="cellChangeFn(scope.row)">
                  <el-option :key="item.code" :label="item.name" :value="item.code" v-for="item in periodTypelist" />
                </el-select>
                <span  v-else >
                  {{ scope.row.periodType }}
                </span>
              </template>
            </el-table-column>

        <el-table-column label="操作" :width="100" fixed="right">
          <template slot-scope="scope">
            <span  @click="showDelete(scope.$index)">删除</span>
          </template>
        </el-table-column>
      </el-table>

定义的方法

    cellDblClick(row, column, cell, event) {
      // element-ui的单元格双击事件给了四个参数，分别是行、列信息，单元格dom对象，双击事件对象
      // 我们这里记录行信息与列信息，用来定位焦点单元格。
      // 设置编辑状态
      this.tableData.forEach((item) => {
        item.isEdit = false;
      });
      row.isEdit = true;
      this.editingProp = column.property;
      this.currentRowIndex = this.tableData.indexOf(row);
    },

   cellBlur(row) {
      if (row.isEdit) {
        row.isEdit = false;
        this.editingProp = "";
        this.currentRowIndex = null;
      }
    },

 cellChangeFn(value) {
     更新时触发保存接口
}
    // 删除
    showDelete(index) {
      this.$confirm("确定删除此项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.cellChangeFn();
        })
        .catch(() => { });
    },

表格样式方法

    // 修改表头颜色
    tableHeaderColor({ row, rowIndex }) {
      if (rowIndex === 0) {
        return {
          background: "#F8F8F8",
          color: "#000",
          fontFamily: "PingFang SC",
          fontSize: "14px",
        };
      }
    },
    tableCellColor({ row, rowIndex }) {
      return {
        background: "#fff",
        color: "#000",
        fontFamily: "PingFang SC",
        fontSize: "14px",
      };
    },
     //必填表头
    renderRequiredHeader(h, { column }) {
      return h('div', {
        class: 'custom-header-cell'
      }, [
        h('span', {
          style: {
            color: '#F56C6C',
            marginRight: '4px'
          }
        }, '*'),
        h('span', column.label)
      ]);
    },

表格中有el-select的可以用v-show 提高性能

输入框限制非负的两位小数

 <el-input-number :controls="false" :precision="2" :min="0" />