element-ui table表格双击行内编辑-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui table表格双击行内编辑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

行内双击编辑的本质：点击后input框出现，保存后span标签出现

<el-dialog
               class="dialog"
               :visible.sync="splitBillDialog2"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :append-to-body="true"
               width="800px"
               height="400px"
               @close ="resetForm"
    >
        <template>
            <el-table
                    ref="splitBillTable"
                    :data="spliteBilltableData"
                    border
                    highlight-current-row
                    show-summary
                    :summary-method="getSummaries"
                    @current-change="handleCurrentChange"
                    @row-dblclick="rowDblclick"
                    :cell-style="splitBillTableStyle"
                    style="width: 100%"
                    height="400px"
                    :row-class-name="tableRowClassName"
            >
                <el-table-column :show-overflow-tooltip="true" property="billUtil" label="开票件数" width="120px">
                    <template slot-scope="scope">
                        <el-input v-if="isEditSplit[scope.$index]" size="small" v-model="scope.row.billUtil">
                            <span v-if="isEditSplit[scope.$index]">{{scope.row.billUtil}}</span>
                        </el-input>
                        <span v-if="!isEditSplit[scope.$index]">{{scope.row.billUtil}}</span>
                    </template>
                </el-table-column>
<!--                <el-table-column label="操作" min-width="50px" class-name="tablebtns" fixed="right">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button v-if="!isEditSplit[scope.$index]" @click="editSplit(scope.$index)" type="text">编辑</el-button>-->
<!--                        <el-button v-if="isEditSplit[scope.$index]" @click="saveSplit(scope.$index)" type="text">保存</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-row style="margin: 0;">
                <el-col :span="24" align="center" class="table-panel">
                    <div v-if="isDoubleClick" style="display: inline">
                        <el-button v-if="isEditSplitBtn &&isDoubleClick" @click="saveSplit()" type="primary">保存</el-button>
                        <el-button v-if="!isEditSplitBtn &&isDoubleClick" @click="cancelSplit()" type="primary">撤销</el-button>
                    </div>
                    <el-button @click="splitBillDialog2 = false">取 消</el-button>
                    <el-button class="confirmBtn" type="primary" @click="preSubmitStockBill()">确 定</el-button>
                </el-col>
            </el-row>
        </div>
    </el-dialog>

data:{
	spliteBilltableData:[
         {mainCompany:'xxx',
             prodName:'xxx',
             prodCode:'xxx',
             billUtil:'xxx',
             billQat:'xxx',
             billAmount:'xxx',
             discountAmount:'xxx',
             totalPrice:'xxx',
             prodUnit:'xxx',
             netPrice:'xxx'
         }
     ],
     currentRow: null,
     currentRow2: null,
     beforeCheckRow2: null,
     isCurrentRow2EditFlag:false,
     isEditSplit:[false],
     index:'',
     index2:'',
     isEditSplitBtn:false,
     isDoubleClick:false,
}
handleCurrentChange(val){
   // console.log("val:",val)
    this.currentRow = val;
},
tableRowClassName({row, rowIndex}){
   row.index = rowIndex;
},
//双击编辑
rowDblclick(row, column){
    this.isEditSplitBtn=true
    this.isDoubleClick=true
    //如果编辑行和选中行不是同一行，则代表编辑了下一行，保存之前编辑的数据
    if (row.index !== this.index) {
        this.$set(this.isEditSplit, this.index, false);
    }
    this.index = row.index;
    this.$set(this.isEditSplit, this.index, true);
},
//保存按钮
saveSplit(){
    this.$set(this.isEditSplit, this.index, false);
    this.isDoubleClick=false
},
//关闭dialog框后重置
resetForm(){
    this.index2 = '';
    this.index = '';
    this.isEditSplit = [false];
    this.isCurrentRow2EditFlag = false;
    this.beforeCheckRow2 = null;
},

如果有编辑某一行的某列其他列随之变化的需求，则需要将上一步选中行存下来，不然双击后选中行就变了，随之修改的值也会产生错误

rowDblclick2(row, column){
    this.isEditSplitBtn=true
    this.isDoubleClick=true
    if (row.index !== this.index2) {   
        if (this.isCurrentRow2EditFlag){     //是否编辑过      
            var price = xxxx;//要改变的值           
            this.$set(this.beforeCheckRow2,"billAmount",price)
        }
        this.beforeCheckRow2=this.currentRow2
        this.isCurrentRow2EditFlag=true
        this.$set(this.isEditSplit, this.index2, false);
    }
    this.index2 = row.index;
    this.$set(this.isEditSplit, this.index2, true);
},

此外，因为用到了tableRowClassName({row, rowIndex}){ row.index = rowIndex;},，所以导致表格的每一行元素多了一个index，有些项目的后端是以类的形式接收，所以会报错，这时需要在发起请求前去掉index

rows.forEach((item)=>{
   for (let key in item) {
        if (key !== 'index') {
            newItems[key] = item[key];
        }
    }
    totalRows.push(deepCopy(newItems))
})

:cell-style="splitBillTableStyle"用法：表格元素样式修改文章来源地址https://www.toymoban.com/news/detail-558278.html

 splitBillTableStyle({ row, column, rowIndex, columnIndex }){
	if (column.property === "xxx") {  //要改样式的列名，这里是改变某列的颜色
	    return 'background-color:#50E3A5;border-bottom:1px solid white'
	}
},