vue+element-ui可编辑table
两种编辑类型:
1、双击单元格,编辑当前单元格
2、点击编辑按钮,编辑整行
第一种:
1、思路
通过一个数组记录编辑状态(也可以是绑定数据的某个属性,如果是多列可编辑,你可能需要多个数组或者属性),双击单元格,编辑状态设置为true,切换显示的文本内容为input输入框,当input输入框失去焦点时,保存数据,编辑状态设置为false。
2、关键代码
<el-table :data="data" @cell-dblclick="handleCellDblclick">
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span v-if="showEdit[scope.$index]">
<el-input size="small" v-model="scope.row.name" @blur="handleInputBlur(scope.$index)"></el-input>