element前端ui组件挺美观的,我们也使用了他们的table组件,但是默认没有提供行编辑功能,我们可以通过将table的每个单元格换成input框来巧妙实现。默认每个单元格就是一个template数据填充,不可编辑;我们可以在template里面包裹一个input框来实现单元格可编辑;等每一个单元格都可编辑的时候,我们可以在每一行后面加一个按钮来控制只可编辑当前行。
先来看一下原始不可编辑的写法:
<el-table width :data="list" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column label="电话" width="260px" align="center">
<template slot-scope="scope">
{{ scope.row.tel }}
</template>
</el-table-column>
</el-table>
再来看一下可编辑的写法:
<el-table width :data="list" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="电话" width="350%" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.tel" :disabled="!scope.row.disabled"></el-input>
</template>
</el-table-column>
<el-table-column label="地址" width="350%" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.address" :disabled="!scope.row.disabled"></el-input>
</template>
</el-table-column>
<!-- 此处省略了一些按钮代码,后面会讲到-->
.................
</el-table>
注意在每一个template元素里面我都放了一个input元素,依然使用v-model绑定值,只不过加了一个disable属性来控制是否可编辑;页面初始化的时候,默认整个表格不可编辑,只有点击了某一行后面的编辑按钮以后,这一行才可以编辑。
由于在vue的精华与核心就是“数据绑定”,页面上的几乎所有属性都可以通过数据来定义,所以我这里采用将disable属性定义在每一行的disable变量里面,这样点击当前行的编辑按钮时,只会改变当前行的编辑状态。我们先来看一下上面改进后遗留的按钮代码:
<el-table-column align="center" label="操作" width="200%">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" size="mini"
icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">保存
</el-button>
<el-button v-else type="primary" size="mini"
@click="startEdit(scope.row)">编辑
</el-button>
<el-button v-if="scope.row.edit" class="cancel-btn" size="mini" icon="el-icon-refresh"
type="warning" @click="cancelEdit(scope.row)">取消
</el-button>
<!--<el-button type="danger" size="mini" @click="handleConfig(scope.row)">删除</el-button>-->
</template>
</el-table-column>
我在每一行后面添加了一个“编辑”按钮,当点击编辑按钮时,按钮栏变为保存和取消两个按钮;他们的状态更换变量通过edit来定义实现
// 编辑
startEdit(row) {
row.edit = !row.edit;
row.disabled = true;
},
// 保存
confirmEdit(row) {
row.edit = false;
row.originalValue = row.address;
if (row.tel == null || row.address == null) {
this.loadAppConfigs();
return;
}
let name= this.params.name;
const p = {...row, name};
// 调用更新方法
updateXXXXx(p);
this.$message({
message: '已修改!',
type: 'success'
});
row.disabled = false;
if (row.id === undefined) {
// 重新加载该页面
}
},
// 取消
cancelEdit(row) {
row.address = row.originalValue;
row.edit = false;
row.disabled = false;
this.$message({
message: '已取消修改!',
type: 'warning'
});
if (row.id === undefined) {
// 重新加载该页面
}
}
}
表格绑定数据源data本身是一个数组,新增一行即是往数组中再添加一个元素,不过如果我们想新增一行时显示在表格的第一行,那么就要用到unshift方法,另外需要在新增一行时处于可编辑状态,还要注意定义一个新行时的状态变量值,因为新增的是一个空输入框,需要我们来输入值,而不是一个默认值帮我们自动生成:
// 增加行
addRow () {
let newLine = {
tel: this.tel,
address: this.address,
edit: true, // 新增时处于可编辑状态,所以按钮是保存和取消
disabled: true // 打开编辑状态
};
this.list.unshift(newLine); // 移到第一行
},
另外为input框设置了disable属性以后,当不可编辑时处于禁用状态,此时文本字体颜色比较暗淡不清晰,看上去不美观,我们的目的是不让他编辑,但是依然需要正常显示颜色,这种情况只能通过重新定义input的样式来实现:
<style>
input[disabled], input:disabled, input.disabled {
color: #000000;
-webkit-text-fill-color: #000000;
-webkit-opacity: 1;
opacity: 1;
font-weight: 900;
}
</style>