elementUI Table 自定义表头动态数据及插槽的操作

人生依旧

需求

项目需求是高度自定义列表界面，表格的表头由后端返回，并且用户可以自定义。而且需要根据用户自定义的表头，数据显示不同的样式。比如有些字段是标签，有些字段是id需要根据数据字典查询对应的name（从数据字典获取值不做讲解）。

效果


一、动态生成表头并填入数据

二、动态生成表头并使用插槽

代码


一、动态生成表头并且数据处理

html

1. <el-table ref="table" :data="tableData" border stripe>
   
2.         <el-table-column type="selection" width="55" fixed="left"></el-table-column>
   
3.         <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>
   
4.         <el-table-column label="操作" fixed="right" min-width="230">
   
5.                 <template slot-scope="scope">
   
6.                         <el-button class="icon-style" icon="el-icon-view" size="mini" @click="onDetails(scope.row)"></el-button>
   
7.                         <el-button type="primary" class="icon-style" icon="el-icon-success" size="mini" @click="onDetails(scope.row)"></el-button>
   
8.                         <el-button type="warning" class="icon-style" icon="el-icon-edit" size="mini" @click="onEdit(scope.row)"></el-button>
   
9.                         <el-button type="danger" class="icon-style" icon="el-icon-delete" size="mini" @click="onDetails(scope.row)"></el-button>
   
10.                 </template>
    
11.         </el-table-column>
    
12. </el-table>

复制代码

js

1. import api from './api'
   
2. export default {
   
3.   data() {
   
4.     return {
   
5.             loading: false,
   
6.             tableData: [],
   
7.             tableTitleList: []
   
8.     }
   
9.   },
   
10.   created() {
    
11.     this.init()
    
12.   },
    
13.   methods: {
    
14.           // 初始化
    
15.     init() {
    
16.       // 获取表格中显示字段 解决加载中界面抖动问题
    
17.       const individual = JSON.parse(localStorage.getItem('list'))
    
18.       this.tableTitleList= individual
    
19.       this.loading = true
    
20.       this.dictInit().then(async () => {
    
21.         await api.init().then(res => {
    
22.           if (res.code === 2000) {
    
23.             this.tableTitleList = []
    
24.             this.tableData = []
    
25.             // res.title_list  // 后端返回的表头数据
    
26.             // 获取所有启用字段
    
27.             res.title_list .map(item => {
    
28.               if (item.display === 1) {
    
29.                 this.tableTitleList.push(item)
    
30.               }
    
31.             })
    
32.             localStorage.setItem('list', JSON.stringify(this.tableTitleList))
    
33.             // 获取所有数据
    
34.             this.dataProcessing(res.data) // 数据处理
    
35.             // 其他操作
    
36.             ...
    
37.             this.$nextTick(() => {
    
38.               this.loading = false
    
39.             })
    
40.           }
    
41.         }).catch(() => {
    
42.           this.loading = false
    
43.         })
    
44.       })
    
45.     },
    
46.     // 数据处理
    
47.     dataProcessing(data) {
    
48.             // 对数据进行处理 简单处理即可
    
49.                 ...
    
50.         }
    
51.   }
    
52. }

复制代码

后端返回数据

1. {
   
2.     "code": 200,
   
3.     "msg": "成功",
   
4.     "title_list ": [
   
5.         {
   
6.             "title": "名称",
   
7.             "key": "name",
   
8.         },
   
9.         {
   
10.             "title": "号码",
    
11.             "key": "number",
    
12.         },
    
13.         // 其他字段类似
    
14.         ...
    
15.     ],
    
16.     "data": [
    
17.         {
    
18.             "name": "123",
    
19.             "number": "134****2222",
    
20.             "createId": "12",
    
21.             "fenpeiId": "13",
    
22.             "flag": "37,38",
    
23.             "createTime": "2023-10-24 10:28:30"
    
24.         },
    
25.         // 其他字段类似
    
26.         ...
    
27.     ],
    
28.     "page": 1,
    
29.     "total": 1000,
    
30.     "limit": 10
    
31. }

复制代码

二、处理后的数据使用插槽

1. 每个单元格中的prop的值：scope.column.property
   
2. 每个单元格中的值：scope.row[scope.column.property]

复制代码

html

1. <el-table ref="table" :data="tableData" border stripe>
   
2.         <el-table-column type="selection" width="55" fixed="left"></el-table-column>
   
3.         <el-table-column v-for="item in tableTitleList" :key="item.key" :prop="item.key" :label="item.title" show-overflow-tooltip min-width="200">
   
4.                 <template slot-scope="scope">
   
5.                         <span v-if="scope.column.property === 'flag'">
   
6.                                 <el-tag type="success" v-for="every in scope.row[scope.column.property]" :key="every" size="mini" style="margin: 0 2px;">{{ every }}</el-tag>
   
7.                         </span>
   
8.                         <span v-else>{{ scope.row[scope.column.property] }}</span>
   
9.                 </template>
   
10.         </el-table-column>
    
11.         <el-table-column label="操作" fixed="right" min-width="230">
    
12.                 <template slot-scope="scope">
    
13.                         <el-button class="icon-style" icon="el-icon-view" size="mini" @click="onDetails(scope.row)"></el-button>
    
14.                         <el-button type="primary" class="icon-style" icon="el-icon-success" size="mini" @click="onDetails(scope.row)"></el-button>
    
15.                         <el-button type="warning" class="icon-style" icon="el-icon-edit" size="mini" @click="onEdit(scope.row)"></el-button>
    
16.                         <el-button type="danger" class="icon-style" icon="el-icon-delete" size="mini" @click="onDetails(scope.row)"></el-button>
    
17.                 </template>
    
18.         </el-table-column>
    
19. </el-table>

复制代码

到此这篇关于elementUI Table 自定义表头动态数据及插槽的操作的文章就介绍到这了,更多相关elementUI Table 自定义表头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/328879dji.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！