测开笔记-实现table内编辑

1、问题

在做测试平台过程中，对数据列表的展示一般我们都是用的el-table，而为了能直接编辑table内容，而不是每次都弹出个编辑框，我们可以做一个在table内直接编辑内容的功能

需求

点击table表中任意表格，出来内容编辑框，输入内容后回车或者离开表格，自动保存内容且展示

2、实现

实现

1、以elementUI举例，先定义一个表格，这里data是返回数据，border是table排序，stripe属性是创建带斑马纹的表格

        <el-table :data="statistics.list" border :stripe="true" @row-click="handleCurrentChange" :cell-class-name="getCellIndex"   
        class="tb-edit" style="width: 100%" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'bold','color':'#272626','heigth':'39px'}">  
          <el-table-column min-width="150" fixed="left" sortable :show-overflow-tooltip="true" type="expand">  
          </el-table-column>  
          <el-table-column fixed min-width="350" label="需求" prop="id" sortable :show-overflow-tooltip="true">  
            <template slot-scope="scope">  
              <a class="tb-first" target="_blank" :href=scope.row.link>测试需求</a>  
            </template>  
          </el-table-column>  
        </el-table>

2、在每个表格中el-table-column 添加输入框 input 标签和显示 span 标签，只是在特定条件下某个显示，某个隐藏，而能够唯一代表该表格的属性就是行和列，能够拿到行和列的属性方式就是用scope 属性

再定义两个变量，点击span标签时候，我们把scope.row.index、scope.column.index 这两个赋值给定义的变量，相等的时候展示 span,不相等的时候展示 input,能够让他们相等或者不相等就是span的点击事件或者input输入事件，

html

          <el-table-column min-width="300" label="冒烟" prop="smokeResult" sortable :show-overflow-tooltip="true">  
            <template slot-scope="scope">  
              <div @click="getThis(scope)">  
                <el-input size="mini" class="input-with-select" controls-position="right" v-if="scope.row.index == coordinate.row && scope.column.index == coordinate.column" @keyup.enter.native="handleEnter()" v-model="scope.row.smokeTesting" @change="handleEdit(scope.$index, scope.row, true)">  
                </el-input>  
                <span v-else-if="scope.row.index != coordinate.row || scope.column.index != coordinate.column" @click="getThis(scope)">{{isSetValue(scope.row.smokeResult)}}&nbsp;&nbsp;{{ scope.row.smokeTesting }}  
                </span>  
              </div>  
            </template>  
          </el-table-column>

js 方法

handleCurrentChange (row, event, column) {  
  //   console.log(row, event, column, event.currentTarget);  
},  
handleEdit (index, row, isGet) {  
  this.testplanFrom = row;  
  this.coordinate.row = -1  
  this.coordinate.column = -1  
  this.updatePlan(this.testplanFrom, isGet)  
  
},  
handleDelete (index, row) {  
  // console.log(index, row);  
},  
getThis (val) {  
  this.coordinate.row = val.row.index;  
  this.coordinate.column = val.column.index;  
},  
getCellIndex: function ({ row, column, rowIndex, columnIndex }) {  
  row.index = rowIndex;  
  column.index = columnIndex;  
},  
  
handleEnter (val) {  
  this.coordinate.row = -1  
},

代码中可以看出， v-if 自定义的data行和列和scope中行和列相等时展示输入，v-else-if不相等时展示span

效果展示