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)}} {{ 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