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" />