el-teable表格动态列数渲染及详解

已于 2023-03-01 15:43:12 修改
阅读量9.5k 收藏 31
点赞数 10
分类专栏： Vue 文章标签： vue.js javascript 前端 elementui json
于 2022-08-11 17:46:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43432158/article/details/126290126
版权

📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：Vue
🛸 支持段段：点赞👍、收藏⭐、留言💬

文章目录

前言

在项目中编写数据大屏的时候，除了柱状图、折线图、散点图…，还有表格展示，首先想到的是Element的el-table表格，但是在后续的实现过程中，后端范围的列数是动态的，刚开始没有考虑到el-table的slot，然后采用了第一种方式，但是数据处理方式不太好，后来在Element官网查看了文档，就使用solt方式进行实现（第二种方式），不过两种方式都需要对数据进行处理

第一种方式

第一种方式主要使用v-for循环实现，页面逻辑比较简单，具体布局如下：

<template>
    <div class="echarts-table">
        <!-- 用来渲染表格头部 -->
        <div class="table-title">
            <div 
                v-for="(item, index) in colsArr" 
                :key="index"
                :style="initStyle()"
                :title="item"
            >
                <span>{{ item }}</span>
            </div>
        </div>
        <!-- 此处for循环用来渲染行数 -->
        <div 
            v-for="(item, index) in initDataList" 
            :key="index"
            class="table-content"
            :class="{ 'odd-number': index % 2 != 0 }"
        >
            <!-- 此处for循环用来渲染列数 -->
            <div 
                v-for="(prop, idx) in item" 
                :key="idx"
                :style="initStyle()" 
                :title="idx != 0 ? prop : ''"
            >
                <div v-if="idx == 0">
                    <span class="icon">{{ prop }}</span>
                </div>
                <span v-else>{{ prop }}</span>
            </div>
        </div>
    </div>
</template>

data中数据如下：

data() {
    return {
        // 表头 单独存放一个数组
        colsArr: ['排名', '区域', '集备主题', '评论次数', '参与教师数'],
        // 数据 需要将数据处理成此种形式 dataList中的每一个子项即是一行数据
        dataList: [
            ['xxx区域区域', '春/朱自清', '1', '5'],
            ['xxx区域', '济南的冬天/老舍', '8', '24'],
            ['xxx区域', '大榕树', '2', '18'],
            ['xxx区域', '你猜', '20', '18'],
            ['xxx区域', '大榕树', '12', '18'],
        ]
    };
}

使用计算属性来处理数据，将数据处理成渲染需要的格式，如下：

computed: {
    // 在数据的第一列是排名，项目中使用的是图片，且不是后端返回的，需要对每一行的数据进行处理
    initDataList() {
        this.dataList.forEach( (item, index) => {
            item.unshift(index + 1);
        })
        return this.dataList;
    }
}

因为列数不固定，需要每一列的宽度也需要动态的计算，通过动态style来实现，具体如下：

/*
 * 通过表头的长度来动态计算每一个列的宽度，此种方式在小程序端不可使用
 */
initStyle() {
    return { 
        width: `calc(100% / ${this.colsArr.length})`,
        margin: '0 0.4%',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis'
    }
}

实现效果图如下：
在这里插入图片描述
完整代码附上：

<template>
    <div class="echarts-table">
        <!-- 用来渲染表格头部 -->
        <div class="table-title">
            <div 
                v-for="(item, index) in colsArr" 
                :key="index"
                :style="initStyle()"
                :title="item"
            >
                <span>{{ item }}</span>
            </div>
        </div>
        <!-- 此处for循环用来渲染行数 -->
        <div 
            v-for="(item, index) in initDataList" 
            :key="index"
            class="table-content"
            :class="{ 'odd-number': index % 2 != 0 }"
        >
            <!-- 此处for循环用来渲染列数 -->
            <div 
                v-for="(prop, idx) in item" 
                :key="idx"
                :style="initStyle()" 
                :title="idx != 0 ? prop : ''"
            >
                <div v-if="idx == 0">
                    <span class="icon">{{ prop }}</span>
                </div>
                <span v-else>{{ prop }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表头 单独存放一个数组
            colsArr: ['排名', '区域', '集备主题', '评论次数', '参与教师数'],
            // 数据 需要将数据处理成此种形式 dataList中的每一个子项即是一行数据
            dataList: [
                ['xxx区域区域', '春/朱自清', '1', '5'],
                ['xxx区域', '济南的冬天/老舍', '8', '24'],
                ['xxx区域', '大榕树', '2', '18'],
                ['xxx区域', '你猜', '20', '18'],
                ['xxx区域', '大榕树', '12', '18'],
            ]
        };
    },
    computed: {
        // 在数据的第一列是排名，项目中使用的是图片，且不是后端返回的，需要对每一行的数据进行处理
        initDataList() {
            this.dataList.forEach( (item, index) => {
                item.unshift(index + 1);
            })
            return this.dataList;
        }
    },
    methods: {
        /*
         * 通过表头的长度来动态计算每一个列的宽度，此种方式在小程序端不可使用
         */
        initStyle() {
            return { 
                width: `calc(100% / ${this.colsArr.length})`,
                margin: '0 0.4%',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
            }
        }
    }
};
</script>

<style lang="stylus" scoped>
.echarts-table 
    color #FFF
    cursor default
    .table-title 
        width 100%
        height 40px
        font-size 14px
        background #212949
        display flex
        align-items center
        text-align center
    .table-content 
        width 100%
        height 40px
        font-size 14px
        display flex
        align-items center
        text-align center
        img 
            height 20px
            vertical-align middle
        span.icon 
            display inline-block
            width 20px
            height 20px
            line-height 20px
            text-align center
            border 1px solid #FFFFFF
            border-radius 50%
    .odd-number 
        background #212949
</style>

第二种方式

第二种方式主要使用了Element的slot属性，也需要把数据处理成渲染需要的格式，相对来说比第一种方式稍复杂，页面布局如下：

<template>
    <div class="element-table">
        <el-table
            :data="initDataList"
            style="width: 100%"
            :header-cell-style="{ background: '#212949' }"
        >
            <el-table-column
                v-for="(item, index) in colsArr"
                :key="index"
                :label="item.colName"
                align="center"
                :show-overflow-tooltip="true"
                min-width="60"
            >
                <template slot-scope="scope">
                    <div v-if="index == 0">
                        <span class="icon">{{ scope.row[item.key].value }}</span>
                    </div>
                    <span v-else>{{ scope.row[item.key].value }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

data中的数据如下：

data() {
    return {
        /**
          * @params
          * colName 表头名称
          * key 自定义列名 处理数据是使用
          */
        colsArr: [
            { colName: '排名', key: 'cols0' },
            { colName: '区域', key: 'cols1' },
            { colName: '主题名称', key: 'cols2' },
            { colName: '次数', key: 'cols3' },
            { colName: '人数', key: 'cols4' }
        ],
        /**
          * @params
          * 此处的列名必须和colsArr中定义的一致
          */
        dataList: [
            { cols1: '区域1', cols2: '春', cols3: 1, cols4: 5 },
            { cols1: '区域2', cols2: '春', cols3: 8, cols4: 24 },
            { cols1: '区域3', cols2: '春', cols3: 18, cols4: 52 },
            { cols1: '区域4', cols2: '春', cols3: 1, cols4: 35 },
            { cols1: '区域5', cols2: '春', cols3: 1, cols4: 20 }
        ]
    };
}

也需要计算属性来处理数据：如下：

computed: {
    // 处理数据
    initDataList() {
        let arr = [];
        this.dataList.forEach((item, index) => {
            let obj = {};
            this.colsArr.forEach((prop, idx) => {
                if(idx == 0) {
                    obj[prop.key] = { value: index + 1, name: prop.colName };
                } else {
                    obj[prop.key] = { value: item[prop.key], name: prop.colName };
                }
            })
            arr.push(obj);
        })
        return arr;
    }
}

实现效果图如下：
在这里插入图片描述

完整代码附上：

<template>
    <div class="element-table">
        <el-table
            :data="initDataList"
            style="width: 100%"
            :header-cell-style="{ background: '#212949' }"
        >
            <el-table-column
                v-for="(item, index) in colsArr"
                :key="index"
                :label="item.colName"
                align="center"
                :show-overflow-tooltip="true"
                min-width="60"
            >
                <template slot-scope="scope">
                    <div v-if="index == 0">
                        <span class="icon">{{ scope.row[item.key].value }}</span>
                    </div>
                    <span v-else>{{ scope.row[item.key].value }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            /**
             * @params
             * colName 表头名称
             * key 自定义列名 处理数据是使用
             */
            colsArr: [
                { colName: '排名', key: 'cols0' },
                { colName: '区域', key: 'cols1' },
                { colName: '主题名称', key: 'cols2' },
                { colName: '次数', key: 'cols3' },
                { colName: '人数', key: 'cols4' }
            ],
            /**
             * @params
             * 此处的列名必须和colsArr中定义的一致
             */
            dataList: [
                { cols1: '区域1', cols2: '春', cols3: 1, cols4: 5 },
                { cols1: '区域2', cols2: '春', cols3: 8, cols4: 24 },
                { cols1: '区域3', cols2: '春', cols3: 18, cols4: 52 },
                { cols1: '区域4', cols2: '春', cols3: 1, cols4: 35 },
                { cols1: '区域5', cols2: '春', cols3: 1, cols4: 20 }
            ]
        };
    },
    computed: {
        // 处理数据
        initDataList() {
            let arr = [];
            this.dataList.forEach((item, index) => {
                let obj = {};
                this.colsArr.forEach((prop, idx) => {
                    if(idx == 0) {
                        obj[prop.key] = { value: index + 1, name: prop.colName };
                    } else {
                        obj[prop.key] = { value: item[prop.key], name: prop.colName };
                    }
                })
                arr.push(obj);
            })
            return arr;
        }
    }
};
</script>

<style lang="stylus" scoped>
.element-table {
    /deep/ .el-table {
        background-color: rgba(0, 0, 0, 0);
    }
    /deep/ .el-table::before {
        height: 0;
    } 
    /deep/ .el-table th.el-table__cell,
    /deep/ .el-table td.el-table__cell {
        border-bottom: none;
        padding: 0;
        color: #FFF;
        font-size: 14px;
    }
    /deep/ .el-table .el-table__header-wrapper {
        height: 40px;
        line-height: 40px;
    }

    /deep/ .el-table .el-table__header-wrapper .cell {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /deep/ .el-table .el-table__row {
        height: 40px;
        background: #182041;
        img {
            height: 20px;
            vertical-align: middle;
        }
        &:nth-child(2),
        &:nth-child(4) {
            background: #212949;
        }
    }
    /deep/ .el-table tbody tr:hover > td {
      background: rgba(0, 0, 0, 0);
    }
    /deep/ .el-table__empty-block {
        background: #182041;
    }
    span.icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #FFFFFF;
        border-radius: 2px;
    }
}
</style>

总之，两种方式的渲染结果没有明显的差异，具体使用那种方式需要根据业务需求决定

好长时间没更新了，最近太忙了呀⏳~

分割线~~~

来补更一个吧~，在项目中用到了sortable属性进行排序，以上两种方式都存在问题

第三种方式

也是使用了Element的slot属性，需要把数据处理成渲染需要的格式，处理起来相对简单

将表格封装成了组件NewsTable.vue，页面布局如下：

<template>
  <div class="news-table">
    <el-table
      :max-height="config.max_height"
      :data="config.table_data"
      style="width: 100%"
      :header-cell-style="{ background: '#212949' }"
    >
      <el-table-column
        align="center"
        v-for="(item, index, key) in config.table_cols"
        :key="key"
        :index="index"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :fixed="item.fixed"
        :show-overflow-tooltip="true"
        :sortable="item.sort"
      >
        <template slot-scope="scope">
          <span>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

在需要用到表格的地方引入即可

import NewTable from '../components/Common/NewsTable.vue';

然后在页面使用

<NewTable :config="tableConfig"></NewTable>

tableConfig中的数据如下

tableConfig: {
        max_height: 240,
        table_cols: [
          { prop: 'rank', label: '排名', width: '', fixed: false, sort: false },
          { prop: 'area', label: '区域', width: '', fixed: false, sort: false },
          { prop: 'theme', label: '集备主题', width: '', fixed: false, sort: false },
          { prop: 'comment', label: '评论次数', width: '', fixed: false, sort: true },
          { prop: 'join', label: '参与教师数', width: '', fixed: false, sort: true }
        ],
        table_data: [
          { rank: '1', area: '河南区域1', theme: '春', comment: 1, join: 5 },
          { rank: '2', area: '郑州区域2', theme: '春', comment: 8, join: 24 },
          { rank: '3', area: '新疆区域3', theme: '春', comment: 18, join: 52 },
          { rank: '4', area: '江苏区域4', theme: '春', comment: 2, join: 35 },
          { rank: '5', area: '其它区域5', theme: '春', comment: 30, join: 20 }
        ]
      }

实现效果如下：

在这里插入图片描述
按照评论次数升序排序如下：

在这里插入图片描述
完整代码附上:

<template>
  <div class="news-table">
    <el-table
      :max-height="config.max_height"
      :data="config.table_data"
      style="width: 100%"
      :header-cell-style="{ background: '#212949' }"
    >
      <el-table-column
        align="center"
        v-for="(item, index, key) in config.table_cols"
        :key="key"
        :index="index"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :fixed="item.fixed"
        :show-overflow-tooltip="true"
        :sortable="item.sort"
      >
        <template slot-scope="scope">
          <span>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'NewsTable',
  props: ["config"],
  components: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>

<style lang="stylus" scoped>
.news-table
  /deep/ .el-table {
    background-color: rgba(0, 0, 0, 0);
  }
  /deep/ .el-table::before {
    height: 0;
  } 
  /deep/ .el-table th.el-table__cell,
  /deep/ .el-table td.el-table__cell {
    border-bottom: none;
    padding: 0;
    color: #FFF;
    font-size: 14px;
  }
  /deep/ .el-table .el-table__header-wrapper {
    height: 40px;
    line-height: 40px;
  }

  /deep/ .el-table .el-table__header-wrapper .cell {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /deep/ .el-table .el-table__row {
    height: 40px;
    background: #182041;
    img {
        height: 20px;
        vertical-align: middle;
    }
    &:nth-child(2),
    &:nth-child(4) {
        background: #212949;
    }
  }
  /deep/ .el-table tbody tr:hover > td {
    background: rgba(0, 0, 0, 0);
  }
  /deep/ .el-table__empty-block {
    background: #182041;
  }
</style>

后续有新的内容继续更新~

我是段段
关注
  • 10
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.tableData" height="400px" max-height="400px" size="small" row-class-name="row" cell-class-name="column" :row-style="setRowStyle" :cell-style="setColumnStyle" :h
VUE+ elementUI 表头动态渲染的两种方法
文龙刚的博客
03-28 1874
【代码】VUE+ elementUI 表头动态渲染的两种方法。
【Vue3】el-table 表格动态渲染
最新发布
qq_39921135的博客
06-17 223
label就是它的列名，值就是prop，即字段里去对象找的数据。每个对象里面都有三个字段，基于这三个字段去配置。注入数据，data里是数组里包对象的格式。建议学会盲写，因为表格后面会用的非常多。列宽直接使用width就行了。查询官网可发现，可以通过。
element vue3 el-table 动态列
qq_44871531的博客
03-01 477
【代码】element vue3 el-table 动态列。
Vue3.0使用Element-ui制作table组件，操作列动态渲染按钮
Cocoon_Xu的博客
02-18 1679
分享一下最近使用vue3.0二次封装过的el-table组件，带有分页功能，以及操作列按动态数据有条件渲染！希望可以帮助各位在职前端小伙伴解决一些实际问题。
el-table表格动态渲染行和列
@LiuStrong
03-14 1443
el-table根据返回的数据动态渲染行和列
el-table动态添加列
denglouhen的博客
04-01 1万+
在开发管理系统过程中碰到一些需求，针对表格，运营人员需要自己添加一些列，然后输入内容保存，以此来实现产品的高可配性，接下来我们就来实现这个功能。 对于这些动态添加的列，后端用JSON字符串的形式存储起来最为方便，这里我们假定存储在custom字段中，例如：custom:"{\"测试\":1}" 这种形式。 所以我们的el-table中，一部分为固有表头字段，而动态列则通过数组循环生成。 1、首先假设返回的表格数据为： tableData: [ { date:..
el-table动态生成列
T70H78的博客
11-15 7227
需求：在统计的表格中展示不同事项和数据，因为事项的名称和数量都不确定，所以需要动态渲染表头和列 效果： 这是后端返回的数据格式，leave是动态的，key的内容就是表头,使用Object.keys()返回一个数组,数组中就是key值列表，再v-for循环渲染 getRecord(params).then(res => { this.recordList = res.data.data || []; //获取到整个统计列表，用for of将每一条的leave 中的k
el-table 表格动态列展示
weixin_45652891的博客
12-01 1236
效果图。
el-table展示报表，动态列匹配数据
letgooo0的博客
01-11 2131
除了第一列，其他列是从数组里循环出来的，为的是用到nano属性，可以匹配到后面经过处理后的数据项进行展示。如果接口返回数据结构正常的话很好展示，无奈后台接口返回的比较奇怪，不能直接拿来用，所以记录一下。其实很好理解，主要我这里加了判断是不是要显示tip，忽略掉就可以了。lableList是为了下面接收到数据以后把数据重组。先上一张效果图和接口返回的数据结构。最后上一个经过处理打印出来的数据结构。很简单的处理，看看就明白了。下面是table部分的代码。
el-table 列的动态显示与隐藏
热门推荐
一起加油吧~
12-23 1万+
当我们在对表格数据查看的时候，可能某些列的数据是当前想要重点关注的，而某些列并不需要展示出来，我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
el-table动态渲染列、可编辑单元格、虚拟无缝滚动
ngd-b的博客
05-01 1万+
针对日常开发的组件二次封装、方案设计实现。包括对el-table的动态渲染、单元格编辑；对于无缝滚动的实现，优化大数据量下的页面卡顿问题。 1. el-table实现动态渲染列 常规使用el-table <template> <el-table ref="multipleTable" :data="data" > <el-table-column prop="family_name" label="姓名" align="center">
【vue】el-table实现动态添加行和列
weixin_42342065的博客
03-21 1万+
el-table实现动态添加行和列
el-table动态增加列、行数据，俩种方法实现按需选择
请叫我欧皇！的博客
10-31 3457
表格数据过多的时候，需要实现动态选择数据的功能，有俩种方法可以按需选择，解决了表格动态选择时闪屏数据抖动问题。注意，这个添加数据是tableData原本就有的，我做的这个操作类似就是折叠选择展示原有的数据。根据选择值进行数据筛选，之后再和原有数据进行比对，最后把数据添加到表格数据中实现。使用了el-dropdown嵌套el-checkbox-group实现。:hide-on-click="false"：点击菜单后不隐藏菜单。4.解决了el-dropdown-menu点击后自动关闭问题。
elementUI el-table的动态显示列组件
weixin_43305450的博客
09-01 2647
elementUI el-table的动态显示列组件
vue + el-table实现动态行或者列
weixin_42028153的博客
04-14 3824
<template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%"> <el-table-column prop="id" label="ID" width="180"> </el-t.
el-table实现动态列，列数根据接口返回
qq_37418556的博客
05-26 5997
vue，element-ui中el-table实现动态列，列数根据接口返回 solt="header"是为了插入表头的，这里遍历listStudent[0],是因为表头都一样，所以取第一行数据的字段做为表头即可 <template> <div> <el-table :data="listStudent"> <el-table-column label="id" prop="id"></el-table-column>
【element-ui】el-table动态列渲染+固定列+合计行
weixin_48847755的博客
03-28 1444
el-table动态列+固定列+合计行自定义
el-table如何动态增加列
Mr_TianSDQ的博客
11-22 1186
planFormList是列表内容，循环出来当做表头。
el-table 一条数据多行展示
05-25
如果你想在 `el-table` 中展示一条数据的多行，可以使用 `slot-scope` 属性和自定义模板来实现。以下是一个示例： ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="details" label="详细信息"> <template slot-scope="scope"> <div v-for="(detail, index) in scope.row.details" :key="index">{{ detail }}</div> </template> </el-table-column> </el-table> ``` 在这个示例中，我们在 `el-table-column` 中定义了一个自定义模板，并使用 `slot-scope` 属性将当前行的数据 `scope.row` 传递给模板。然后在模板中，我们使用 `v-for` 循环遍历当前行的 `details` 属性，并将每个元素渲染为一个 `div` 元素。这样就可以在表格中展示一条数据的多行信息了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是段段

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值