快捷導(dǎo)航

elementUI?Table?自定義表頭動(dòng)態(tài)數(shù)據(jù)及插槽的操作

更新時(shí)間：2024年10月16日 11:20:00 作者：xuelong-ming

本文介紹了如何實(shí)現(xiàn)一個(gè)高度自定義的列表界面,其中表格的表頭由后端返回,并且允許用戶(hù)根據(jù)需求自定義表頭和數(shù)據(jù)展示樣式,本文給大家介紹elementUI?Table?自定義表頭動(dòng)態(tài)數(shù)據(jù)及插槽的操作,感興趣的朋友跟隨小編一起看看吧

需求

項(xiàng)目需求是高度自定義列表界面，表格的表頭由后端返回，并且用戶(hù)可以自定義。而且需要根據(jù)用戶(hù)自定義的表頭，數(shù)據(jù)顯示不同的樣式。比如有些字段是標(biāo)簽，有些字段是id需要根據(jù)數(shù)據(jù)字典查詢(xún)對(duì)應(yīng)的name（從數(shù)據(jù)字典獲取值不做講解）。

效果

一、動(dòng)態(tài)生成表頭并填入數(shù)據(jù)

二、動(dòng)態(tài)生成表頭并使用插槽

代碼

一、動(dòng)態(tài)生成表頭并且數(shù)據(jù)處理

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() {
      // 獲取表格中顯示字段 解決加載中界面抖動(dòng)問(wèn)題
      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  // 后端返回的表頭數(shù)據(jù)
            // 獲取所有啟用字段
            res.title_list .map(item => {
              if (item.display === 1) {
                this.tableTitleList.push(item)
              }
            })
            localStorage.setItem('list', JSON.stringify(this.tableTitleList))
            // 獲取所有數(shù)據(jù)
            this.dataProcessing(res.data) // 數(shù)據(jù)處理
            // 其他操作
            ...
            this.$nextTick(() => {
              this.loading = false
            })
          }
        }).catch(() => {
          this.loading = false
        })
      })
    },
    // 數(shù)據(jù)處理
    dataProcessing(data) {
    	// 對(duì)數(shù)據(jù)進(jìn)行處理 簡(jiǎn)單處理即可
		...
	}
  }
}

后端返回?cái)?shù)據(jù)

{
    "code": 200,
    "msg": "成功",
    "title_list ": [
        {
            "title": "名稱(chēng)",
            "key": "name",
        },
        {
            "title": "號(hào)碼",
            "key": "number",
        },
        // 其他字段類(lèi)似
        ...
    ],
    "data": [
        {
            "name": "123",
            "number": "134****2222",
            "createId": "12",
            "fenpeiId": "13",
            "flag": "37,38",
            "createTime": "2023-10-24 10:28:30"
        },
        // 其他字段類(lèi)似
        ...
    ],
    "page": 1,
    "total": 1000,
    "limit": 10
}

二、處理后的數(shù)據(jù)使用插槽

每個(gè)單元格中的prop的值：scope.column.property
每個(gè)單元格中的值：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>

到此這篇關(guān)于elementUI Table 自定義表頭動(dòng)態(tài)數(shù)據(jù)及插槽的操作的文章就介紹到這了,更多相關(guān)elementUI Table 自定義表頭內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: