element实现表格字段可编辑

element表格可编辑

element表格组件，点击表格时判断是否有权限，有权限则显示输入框，并获取焦点，失去焦点时，调取后端接口，将修改后的字段提交

<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      @cell-click="cellClick">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="可编辑" align="center" header-align="center">
          <template scope="scope">
            <el-input ref="xsInput" v-model="scope.row.edit" v-if="scope.row.seen" @blur="loseFcous(scope.$index, scope.row)"></el-input>
            <span style="margin-left: 10px" v-else>{{ scope.row.edit }}</span>
          </template>
        </el-table-column>
    </el-table>
  </template>

import { editapi } from '@/api/api'
  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
    methods: {
	    loseFcous(index, row) {
	        row.seen = false;
	        this.edit(row)
      	},
    	cellClick(row, column, cell, event) {
	        const flag = this.isAuth('sys:user:edit') // 判断是否有编辑权限
	        if (flag && column.label === '可编辑') {
	          this.$set(row, 'seen', true)
	          this.$nextTick(function () {
	            const input = cell.querySelector('.el-input__inner')
	            input.focus()
	          })
         	}
      	},
      	// 修改销售
      edit(row) {
        editapi(row.edit).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          } else {
            this.$message.error(data.msg);
          }
        })
      },
    }
  </script>