需求
项目需求是高度自定义列表界面,表格的表头由后端返回,并且用户可以自定义。而且需要根据用户自定义的表头,数据显示不同的样式。比如有些字段是标签,有些字段是id需要根据数据字典查询对应的name(从数据字典获取值不做讲解)。
效果
一、动态生成表头并填入数据
二、动态生成表头并使用插槽
代码
一、动态生成表头并且数据处理
html
<el-table ref="table" :data="tableData" border stripe>
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
<el-table-column v-for="item in tableTitleList" :key="item.key" :prop="item.key" :label="item.title" show-overflow-tooltip min-width="200"></el-table-column>
<el-table-column label="操作" fixed="right" min-width="230">
<template slot-scope="scope">
<el-button class="icon-style" icon="el-icon-view" size="mini" @click="onDetails(scope.row)"></el-button>
<el-button type="primary" class="icon-style" icon="el-icon-success" size="mini" @click="onDetails(scope.row)"></el-button>
<el-button type="warning" class="icon-style" icon="el-icon-edit" size="mini" @click="onEdit(scope.row)"></el-button>
<el-button type="danger" class="icon-style" icon="el-icon-delete" size="mini" @click="onDetails(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
js
import api from './api'
export default {
data() {
return {
loading: false,
tableData: [],
tableTitleList: []
}
},
created() {
this.init()
},
methods: {
// 初始化
init() {
// 获取表格中显示字段 解决加载中界面抖动问题
const individual = JSON.parse(localStorage.getItem('list'))
this.tableTitleList= individual
this.loading = true
this.dictInit().then(async () => {
await api.init().then(res => {
if (res.code === 2000) {
this.tableTitleList = []
this.tableData = []
// res.title_list // 后端返回的表头数据
// 获取所有启用字段
res.title_list .map(item => {
if (item.display === 1) {
this.tableTitleList.push(item)
}
})
localStorage.setItem('list', JSON.stringify(this.tableTitleList))
// 获取所有数据
this.dataProcessing(res.data) // 数据处理
// 其他操作
...
this.$nextTick(() => {
this.loading = false
})
}
}).catch(() => {
this.loading = false
})
})
},
// 数据处理
dataProcessing(data) {
// 对数据进行处理 简单处理即可
...
}
}
}
后端返回数据
{
"code": 200,
"msg": "成功",
"title_list ": [
{
"title": "名称",
"key": "name",
},
{
"title": "号码",
"key": "number",
},
// 其他字段类似
...
],
"data": [
{
"name": "123",
"number": "134****2222",
"createId": "12",
"fenpeiId": "13",
"flag": "37,38",
"createTime": "2023-10-24 10:28:30"
},
// 其他字段类似
...
],
"page": 1,
"total": 1000,
"limit": 10
}
二、处理后的数据使用插槽
每个单元格中的prop的值:scope.column.property
每个单元格中的值:scope.row[scope.column.property]
html
<el-table ref="table" :data="tableData" border stripe>
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
<el-table-column v-for="item in tableTitleList" :key="item.key" :prop="item.key" :label="item.title" show-overflow-tooltip min-width="200">
<template slot-scope="scope">
<span v-if="scope.column.property === 'flag'">
<el-tag type="success" v-for="every in scope.row[scope.column.property]" :key="every" size="mini" style="margin: 0 2px;">{{ every }}</el-tag>
</span>
<span v-else>{{ scope.row[scope.column.property] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" min-width="230">
<template slot-scope="scope">
<el-button class="icon-style" icon="el-icon-view" size="mini" @click="onDetails(scope.row)"></el-button>
<el-button type="primary" class="icon-style" icon="el-icon-success" size="mini" @click="onDetails(scope.row)"></el-button>
<el-button type="warning" class="icon-style" icon="el-icon-edit" size="mini" @click="onEdit(scope.row)"></el-button>
<el-button type="danger" class="icon-style" icon="el-icon-delete" size="mini" @click="onDetails(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>