javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > elementUI Table 自定义表头

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

作者:xuelong-ming

本文介绍了如何实现一个高度自定义的列表界面,其中表格的表头由后端返回,并且允许用户根据需求自定义表头和数据展示样式,本文给大家介绍elementUI Table 自定义表头动态数据及插槽的操作,感兴趣的朋友跟随小编一起看看吧

需求

项目需求是高度自定义列表界面,表格的表头由后端返回,并且用户可以自定义。而且需要根据用户自定义的表头,数据显示不同的样式。比如有些字段是标签,有些字段是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>

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

您可能感兴趣的文章:
阅读全文