(vue)vue+iview 动态循环表头+编辑单元格
效果:
需求:
1.动态循环后端返回的表头 及 表格数据
3.编辑table里的 单元格
<Table
ref="selection"
:columns="columns"
:data="tableData1"
@on-selection-change="handleSelectChange"
>
<template
slot-scope="{ row, column, index }"
:slot="item.slot"
v-for="(item, index) in columns.slice(1)"
>
<Input
v-model="tableData1[index][column.slot]"
v-if="
selectedCell.rowIndex == index &&
selectedCell.columnIndex == column.slot
"
@on-enter="
initSelectedCell(row, tableData1[index][column.slot], item.slot)
"
/>
<!-- 显示内容 -->
<div v-else>
<div @click="editCellData(row, column, index)">
{{ row[item.slot] }}
</div>
</div>
</template>
<template slot-scope="{ row, index }" slot="operation">
<el-button type="text" @click="editRow(row, index)">编辑</el-button>
<el-button type="text" @click="deleteRow(row, index)">删除</el-button>
</template>
</Table>
js
data(){
return {
columns: [],
tableData1: [],
selectedCell: {
columnIndex: "",
rowIndex: "",
},
columns1: [
{
type: "selection",
width: 60,
align: "center",
},
{
title: "名称",
slot: "name",
align: "center",
},
{
title: "别名",
slot: "otherName",
align: "center",
},
{
title: "英文名",
slot: "enName",
align: "center",
},
{
title: "出生地",
slot: "place",
align: "center",
},
{
title: "出生日期",
slot: "birthday",
align: "center",
},
{
title: "操作",
slot: "operation",
align: "center",
},
],
tableData11: [
{
name: "张三",
otherName: "三三",
enName: "zhangsan",
place: "北京",
birthday: "2022-09-16",
},
{
name: "李四",
otherName: "四四",
enName: "lisi",
place: "上海",
birthday: "2022-09-20",
},
],
}
}
//监听表头和表格数据
watch: {
columns: {
deep: true,
immediate: true,
handler(n) {
this.columns = n;
},
},
tableData1: {
deep: true,
immediate: true,
handler(n) {
this.tableData1 = n;
},
},
},
方法:
methods:{
//属性对比
handleParam(row, index) {
this.compare = true;
this.columns = this.columns1;
this.tableData1 = this.tableData11;
},
// 关闭Input框
clearInput() {
this.selectedCell.rowIndex = "";
this.selectedCell.columnIndex = "";
},
initSelectedCell() {
// 单元格数据不输入给默认值
let columnData = this.selectedCell.columnIndex;
let rowData = this.selectedCell.rowIndex;
if (
this.tableData1[rowData][columnData] == null ||
this.tableData1[rowData][columnData] == ""
) {
this.tableData1[rowData][columnData] = 0;
}
this.selectedCell.rowIndex = "";
this.selectedCell.columnIndex = "";
},
//编辑单元格
editCellData(row, column, index) {
this.selectedCell.rowIndex = index;
this.selectedCell.columnIndex = column.slot;
},
}
案例二:动态获取表头且不显示具有隐藏属性的列
<Table
ref="selection"
:columns="colHidden"
:data="tableDataNew"
@on-selection-change="handleSelectChange"
>
<template
slot-scope="{ row, column, index }"
:slot="item.slot"
v-for="(item, index) in colHidden"
>
{{ row[item.slot] }}
</template>
</Table>
data() {
return {
columns: [
{
title: "条件",
slot: "condition",
align: "center",
hidden:true, //隐藏属性,此列不显示
},
{
title: "内容",
slot: "content",
align: "center",
ellipsis: true,
},
],
}
}
computed: {
colHidden: function () {
return this.columns.filter(function (e) {
return !e.hidden;
});
},
},
//给表头和数据加监听,及时更新
watch: {
columns: {
deep: true,
immediate: true,
handler(n) {
this.columns = n;
},
},
tableDataNew: {
deep: true,
immediate: true,
handler(n) {
this.tableDataNew = n;
},
},
},
解决参考:
https://blog.csdn.net/canshegui2293/article/details/118414007
https://blog.csdn.net/qq_43469899/article/details/103488827
https://blog.csdn.net/qq_43469899/article/details/103526410?spm=1001.2014.3001.5501