实现表格可编辑(点击字段出现输入框)vue elementUI

实现表格可编辑

参考：el-table 中实现表格可编辑_el表格编辑_快乐征途的博客-CSDN博客

按行保存数据，每行数据最后都有一个保存按钮，如下图所示

使用的是<template>嵌套<el-input>

完整代码如下：

<template>
  <div>
    <el-table
      :data="tableData"
      size="mini"
      style="width: 600px"
      @cell-click="handleCellClick"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
        <template class="item" slot-scope="scope">
        //初始页面先将input隐藏（display:none）显示txt
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="item__input" v-model="scope.row.date" style="display:none;"></el-input>
          <div class="item__txt">{{scope.row.date}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
        <template class="item" slot-scope="scope">
          <el-input class="item__input" v-model="scope.row.name" placeholder="请输入姓名" style="display:none;"></el-input>
          <div class="item__txt">{{scope.row.name}}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
​
<script>
export default {
  data () {
    return {
      // 表格数据
      tableData: [{
        id: 0,
        date: '2016-05-02',
        name: '王小虎'
      }, {
        id: 1,
        date: '2016-05-04',
        name: '王小虎'
      }, {
        id: 2,
        date: '2016-05-01',
        name: '王小虎'
      }, {
        id: 3,
        date: '2016-05-03',
        name: '王小虎'
      }],
      // 需要编辑的属性
      editProp: ['date', 'name'],
      // 保存进入编辑的cell
      clickCellMap: {}
    }
  },
  methods: {
    /** 点击cell */
    handleCellClick (row, column, cell, event) {
    //property是该列绑定的字段名称，若是日期列，则property是date
      const property = column.property
      if (this.editProp.includes(property)) {
        // 保存cell，cell是指具体点击的表格中的单元格
        this.saveCellClick(row, cell)
        //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。参数是必填项
        //隐藏txt显示input输入框
        cell.querySelector('.item__txt').style.display = 'none'
        cell.querySelector('.item__input').style.display = 'block'
        //该单元格的input获得焦点
        cell.querySelector('input').focus()
      }
    },
    /** 保存进入编辑的cell */
    //将进入编辑的cell存入clickCellMap数组中，后面取消编辑状态的时候遍历此数组就可以了
    saveCellClick (row, cell) {
      const id = row.id
      if (this.clickCellMap[id] !== undefined) {
        if (!this.clickCellMap[id].includes(cell)) {
          this.clickCellMap[id].push(cell)
        }
      } else {
        this.clickCellMap[id] = [cell]
      }
    },
    /** 保存数据（这部分内容可以添加到保存按钮中） */
    save (row) {
      const id = row.id
      // 取消本行所有cell的编辑状态
      this.clickCellMap[id].forEach(cell => {
        this.cancelEditable(cell)
      })
      this.clickCellMap[id] = []
    },
    /** 取消编辑状态 */
    cancelEditable (cell) {
      cell.querySelector('.item__txt').style.display = 'block'
      cell.querySelector('.item__input').style.display = 'none'
    },
  }
}
</script>

是否可编辑权限设置

此时，我的表格数据中有一个字段是创建人，若该条数据不是当前系统登陆的用所创建的，则当前用户没有权限编辑此条数据，也就是说用户只能编辑自己创建的那条数据。

需要添加如下代码：

data(){
    return{
        username:'',
        tableDisabled:false
    }
},
created(){
    this.getUserName()
},
methods:{
    getUserName(){
    //若该系统login页面使用的是localStorage存储的用户信息，先打印看一下localStorage然后再获取相应字段
        this.username = localStorage.getItem("username")
    },
    /** 点击cell */
    handleCellClick (row, column, cell, event) {
      const us = row.createUser;
      if(this.username == us){
        this.tableDisabled = true;
      }else{
        this.tableDisabled = false;
      }
      if(!this.tableDisabled){
        this.$message.warning("您无权限更改此条数据")
      }else{
          const property = column.property
          if (this.editProp.includes(property)) {
            this.saveCellClick(row, cell)
            cell.querySelector('.item__txt').style.display = 'none'
            cell.querySelector('.item__input').style.display = 'block'
            cell.querySelector('input').focus()
          }
       }
    },
}

表格点击下一页以后隐藏input

若当前页的表格没有点击保存按钮将input输入框隐藏，直接点击别的页面，那么别的页面input输入框的显示状态和之前页面是一样的，这样可能会导致该页面数据不是该用户创建的，但是那条数据缺显示了可编辑的输入框。

导致如上bug的原因是：根据cell设置的input的状态，但是分页了以后，第一页和第二页相同的单元格都显示input。比如：我点击左上角的单元格显示输入框，当进入下一页的时候，左上角的输入框同样是显示的状态。

现在，需要点击分页进入别的页面之前，将所有的input输入框隐藏。

在表格分页条的current-change事件中添加代码：

currentChangeHandle(val){
    this.pageNum = val;
    let id = ''
    //此时tableData的数据还是之前的页面数据还未更新
    for(let i=0;i<this.tableData.length;i++){
        id = this.tableData[i].id;
    //如果当前行不存在input显示，this.clickCellMap[id]是undefined
        if(this.clickCellMap[id] !==undefined){
        //取消cell编辑状态，显示txt
            this.clickCellMap[id].forEach(cell=>{
            //此方法在最上面的代码中写了
                this.cancelEditTable(cell);
            })
        this.clickCellMap[id] = []
        }
    }
    //调用后端接口更新表格数据
    this.getList()
}