1、表格点击式可编辑表格 el-table
效果演示：
xxx.vue 文件模板 ：
<template>
<el-table
height="450"
v-loading="loading"
:data="roleList"
element-loading-text="拼命加载中"
@cell-click="handleCurrentChange"
>
<el-table-column type="selection" width="55"
:reserve-selection="true"
align="center" />
<el-table-column
label="测试列"
:show-overflow-tooltip="true"
prop="test"
width="200"
sortable="custom"
:sort-orders="['descending', 'ascending']"
align="center"
>
<template slot-scope="scope">
<el-input
v-if="scope.row.isEdit"
ref="gain"
v-model="scope.row.test"
@blur="handleEdit(scope)"
/> <!-- 内容改变调用修改方法-->
<span v-else>{
{
scope.row.test }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
import {
datalist,
} from "@/api/test";
export default {
data() {
return {
total: 0,
// 当前页面的行数据
roleList: [],
// 弹出层标题
title: "",
// 开始自定义变量 ！！！
multipleSelection: [],
};
},
methods: {
handleCurrentChange(row, event, cell, column) {
//显示文本框
if (event.label === '测试列') {
this.$set(row, 'isEdit', true) /** 是一个循环匹配是否编辑，即是否
显示输入框的状态 */
} else{
return false
}
this.$nextTick(() => {
this.$refs.gain.focus() /**显示文本框并获取焦点，必须有该配置，
不然点击外面都不会将输入框隐藏 */
})
},
handleEdit({
row, column }){
//隐藏文本框
if (column.label === '测试列') {
console.log("------------ 测试列 row", row)
this.changeData(row)
this.$set(row, 'isEdit', false) /** 配置为响应式对象
其实就是额外添加参数 isEdit*/
}
},
/** 查询列表 */
getList() {
this.loading = true;
/** datalist 是一个 api 路由 获取后端数据 addDateRange
不用管，只是若依框架的一个添加额外参数的方法 */
datalist(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.roleList = response.rows; /** 返回的数据 */
this.loading = false;
this.roleList.forEach(item => {
this.$set(item, 'isEdit', false); // 默认测试列每一行的输入框都是是隐藏状态
});
);
})
}
}
}
<script>
参考链接
2、分页跳转保存上一次的选择（回显）
xxx.vue 文件模板 ：
<template>
<el-table
height="450"
v-loading="loading"
:data="roleList"
:row-key="getRowKey"
:data="roleList"
ref="multipleTable"
@select="handleCheckBox"
@select-all="handleSelectAll"
>
<el-table-column type="selection" width="55"
:reserve-selection="true"
align="center" />
<el-table-column
label="测试列"
:show-overflow-tooltip="true"
prop="test"
width="200"
sortable="custom"
:sort-orders="['descending', 'ascending']"
align="center"
>
</el-table-column>
</el-table>
</template>
<script>
import {
datalist,
} from "@/api/test";
export default {
data() {
return {
// 总条数
total: 0,
// 当前页面的行数据
roleList: [],
// 弹出层标题
title: "",
// 开始自定义变量 ！！！
multipleSelection: [],
};
},
methods: {
getRowKey (row) {
// 获取勾选的那一行数据的 id 可以执行导出订单功能
return row.test_id; // 可以指定任何具有唯一性的字段 xxx_id
},
//该方法是单选时的方法
handleCheckBox(rows, row) {
if (this.multipleSelection.find((item) => item == row.test_id)) {
//下面这个filter方法就是删除的方法
this.multipleSelection = this.multipleSelection.filter(
(item) => item != row.test_id // 可以指定任何具有唯一性的字段 xxx_id
);
} else {
this.multipleSelection.push(row.test_id);
}
},
//该方法是当页全选的方法
handleSelectAll(rows) {
if (rows.length) {
rows.forEach((row) => {
if (!this.multipleSelection.find((item) => item == row.test_id)) {
this.multipleSelection.push(row.test_id);
}
});
} else {
this.roleList.forEach((row) => {
this.multipleSelection = this.multipleSelection.filter(
(item) => item != row.test_id
);
});
}
},
/** 查询列表 */
getList() {
this.loading = true;
/** datalist 是一个 api 路由 获取后端数据 addDateRange
不用管，只是若依框架的一个添加额外参数的方法 */
datalist(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.roleList = response.rows;
this.loading = false;
// 分页后回显功能
this.$nextTick(()=>{
this.roleList.forEach((item,index)=>{
if(this.multipleSelection.findIndex(v=>v == item.test_id) >= 0){
this.$refs.multipleTable.toggleRowSelection( /** 这里一行都不用改 */
this.$refs.multipleTable.data[index], /** 这里一行都不用改 */
true /** 这里一行都不用改 */
);
}
})
}
// 分页后回显功能
);
})
} /** 查询列表 */
}
}
<script>
参考链接
1. vue 基于el-table实现多页多选、翻页回显过程
3、按钮式可编辑表格
vue 文件模板
<el-table
height="495"
v-loading="loading"
:data="tableData"
>
<el-table-column
label="姓名"
:show-overflow-tooltip="true"
prop="name"
width="200"
sortable="custom"
:sort-orders="['descending', 'ascending']"
align="center"
>
<template slot-scope="scope">
<div v-if="!scope.row.isEdit">{
{
scope.row.name}}</div>
<div v-else>
<el-input v-model="scope.row.name"></el-input>
</div>
</template>
</el-table-column>
<el-table-column
label="地址"
:show-overflow-tooltip="true"
prop="address"
width="200"
sortable="custom"
:sort-orders="['descending', 'ascending']"
align="center"
>
<template slot-scope="scope">
<div v-if="!scope.row.isEdit">{
{
scope.row.address}}</div>
<div v-else>
<el-input v-model="scope.row.address"></el-input>
</div>
</template>
</el-table-column>
<el-table-column
label="编辑按钮"
width="100"
>
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)">{
{
scope.row.isEdit ? '确认' : '编辑' }}</el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleClick(row) {
// 动态设置数据并通过这个数据判断显示方式
if (row.isEdit) {
// 2022.8.31 更新
// 其实我们想要取消编辑状态的话不需要用下面这步
// 直接使用 row.isEdit = false 就行
// 因为 this.$set 后 isEdit 字段已经被 Vue 加上了响应式
this.$delete(row, 'isEdit')
} else {
this.$set(row, 'isEdit', true);
}
console.log(this.tableData)
},
handle(row, column, cell, event) {
}
}
}
</script>