element-ui实现动态表头的表格问题汇总

zhezhongyun 2025-04-29 06:46 2 浏览

demo代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>el-table动态表头</title>
    <link rel="stylesheet" type="text/css" href="./lib/element-ui/theme-chalk/index.css" />
  </head>
  <body>
    <div id="app">
			<el-table
        :data="tableBody"
        :header-cell-style="{ background: '#F3F4F7' }"
        :header-row-style="{ fontWeight: 500, color: '#909399' }"
      >
        <el-table-column align="center" :label="tableHeadItem" v-for="(tableHeadItem, idx) in tableHead" :key="idx">
          <template scope="scope">
            <i class="el-icon-platform-eleme" style="font-size: 16px"></i>
            {{tableBody[scope.$index][idx]}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <script src="./lib/vue/vue.js"></script>
    <script src="./lib/element-ui/index.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data() {
          return {
            res: [
              {
                NAME: "王二",
                VALUE: 1,
                SEX: 2,
              },
              {
                NAME: "张三",
                VALUE: 1,
                SEX: 1,
              },
              {
                NAME: "李四",
                VALUE: 2,
                SEX: 1,
              },
            ],
            tableBody: [],
            tableHead: [],
          };
        },
        created() {
					this.tableHead = Object.keys(this.res[0]);  // 表头 [ "NAME", "VALUE", "SEX" ]
          this.res.forEach((item) => {
            this.tableBody.push(Object.values(item));  // 表体  [ ["王二", 1, 2], ["张三", 1, 1], ["李四"， 2, 1] ]
					});
        },
      });
    </script>
  </body>
</html>

动态表格是生成列，也就是每一个<el-table-column>然后再根据所有列去遍历生成行，这样一个过程，知道这些，要做的就是根据这么一个过程去生成这样一个数据格式就行了。

实现动态表格的延伸：

element-ui官方推荐的CDN引入使用element的任务组件都是没有问题的，但是如果将样式和组件库代码下载下来改为本地引入，icon组件将不能使用！

CDN引入：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

请求资源：

请求的网络资源中多了一个element-icons.woff文件，原因：查看element中index.css中的icon的引入方式。

@font-face {
  font-family: element-icons;
  src: url(fonts/element-icons.woff) format("woff"), url(fonts/element-icons.ttf) format("truetype");
  font-weight: 400;
  font-display: "auto";
  font-style: normal;
}

解决方法：

复制字体图标资源链接下载下来，然后在element的index.css文件夹同级目录中新建fonts文件夹放入下载好的element-icons.woff和element-icons.ttf字体图标文件。

HTML basefont face 属性

上一篇：css如何引入特殊字体
下一篇：毫无头绪的，CSS3知识清单帮你理清思路

element-ui实现动态表头的表格问题汇总

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?