el-table行内编辑

el-table的行内编辑

本周开发遇到了需要能够在element-ui的el-tabe组件中实现行内编辑

啥也不说先放代码

html

<el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
  <el-table-column prop="date" label="日期"  width="180"> </el-table-column>
  <el-table-column prop="name" label="姓名" width="180">
  	<template slot-scope="scope">
      <el-input
        v-model="scope.row.name"
        v-show="scope.row.seen"
        @focus="handleSetFoucsData(scope.row)"
        @blur="loseFcous(scope.row)"
      ></el-input>
      <div v-show="!scope.row.seen">{{scope.row.name}}</div>
  </el-table-column>
  <el-table-column  prop="address" label="地址"></el-table-column>
</el-table>

js:

import _ from 'lodash'
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          seen:false
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          seen:false
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          seen:false
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          seen:false
        }],
        oldRow:{}
      }
    }
		methods:{
      handleRowClick(row){
       for (let item of this.tableData) {
          item.seen = false
        }
        row.seen = true
      },
      handleSetFoucsData(row){
        this.oldRow  = row
      },
      loseFcous(row){
        let res = _.isEqual(row, this.oldRow)
        if(res){
          // 行编辑未修改
        }else{
          // 行编辑发生修改
        }
      }
    }
  }
</script>

如果你仅仅需要行内编辑，那么handleRowClick()就可以了，本质就是使用排它思想，在每次行点击前将所有行对象中的seen属性设置为false,再将当前行的seen设置为 true即可

---

如果你需要对输入的值，进行判断，当发生了编辑并且值执行对应操作，或者仅仅是编辑但是值未改变，那么你就需要handleSetFocusData()和loseFocus()函数。

方法实现本质就是，在输入框显示并且聚焦时，将行的旧数据设置给oldRow,在输入框失去焦点后获取当前行，将this.oldRow和row进行比较，这里使用的时lodash函数库的isEqual()函数（需要npm i lodash官方当文档）进行对比，可以自行添加对应的操作

注意，如果行内的编辑想后端传回的字段如果是null,那么即使你只是聚焦了输入框但是没有发生编辑，但是isEqual()函数还是会返回false,因为你在聚焦输入框后，null就会变成空字符串，所以最好对行内数据对象处理后在赋值给表格，方式意外发生