VUE之Vxe-table动态生成多级表头

最新推荐文章于 2024-08-07 17:30:11 发布

赫兹/Herzz

最新推荐文章于 2024-08-07 17:30:11 发布

阅读量2.7k

点赞数 1

分类专栏： vue vuex 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hanxiaoxi_yeal/article/details/127808708

版权

vue 同时被 2 个专栏收录

61 篇文章 2 订阅

订阅专栏

vuex

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个使用Vue.js实现的动态表格组件，该组件包含多级表头，数据根据接口返回动态生成，并且最后一列提供编辑功能。表格具有排序、溢出显示等特性，数据模拟为包含领料数、良品数和良品率的生产过程记录。

摘要由CSDN通过智能技术生成

需求：
1.第一列为正常列；
2.第二列开始为动态生成列（根据接口返回数据生成）；
3.最后一列为编辑列。

实现步骤：

模板中定义：

<!-- 多级表头 -->
        <vxe-table
          id="prdRequest-id"
          border
          :page="page"
          :row-config="{ isHover: true }"
          v-bind="{
            height: tableHeight,
            sortConfig: {remote: true},
            'show-overflow':true
          }"
          auto-resize
          align="center"
          class="content-height mytable-scrollbar"
          :data="columns"
        >
          <vxe-column title="日期" width="120" sortable />
          <template v-for="(item, key) in columns">
            <vxe-colgroup
              :key="item.section_id || key"
              :title="item.section_name"
              :width="item.width || 100"
            >
              <vxe-column
                width="100"
                title="领料数"
                field="receive_num"
                v-bind="{'show-overflow': true}"
              />
              <vxe-column
                width="100"
                title="良品数"
                field="good_num"
                v-bind="{'show-overflow': true}"
              />
              <vxe-column
                width="100"
                title="良品率"
                field="good_rate"
                v-bind="{'show-overflow': true}"
              />
            </vxe-colgroup>
          </template>
          <vxe-column
            :width="200"
            type="html"
            title="操作"
          >
            <template slot-scope="scope">
              <div class="table-reload">
                <span class="table-reload-examine" @click="(e) => handleEditRow(e, scope.row)">编辑</span>
              </div>
            </template>
          </vxe-column>
        </vxe-table>

计算属性中定义数据（这里为模拟数据）：

computed() {
	columns() {
      return [
        {
          'id': 1,
          'section_id': 1,
          'section_name': '钢化',
          'receive_num': 99,
          'good_num': 99,
          'good_rate': 99.0
        },
        {
          'id': 2,
          'section_id': 2,
          'section_name': '清洗',
          'receive_num': 88,
          'good_num': 88,
          'good_rate': 88.0
        },
        {
          'id': 3,
          'section_id': 3,
          'section_name': '检验',
          'receive_num': 77,
          'good_num': 77,
          'good_rate': 77.0
        }
      ]
    }
}