网站首页 > 精选文章正文

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

wudianyun 2025-07-21 18:30:18 精选文章 6 ℃

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字体图标文件。

上一篇：告别频繁登录!Nuxt3 + TS + Vue3实战:双Token无感刷新方案全解析
下一篇： Vue 前端开发——导入Excel/Csv（vue前端导入excel文件）

网站首页 > 精选文章 正文

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

猜你喜欢

网站首页 > 精选文章正文