Vue+ElementUI实现两级、可动态扩展表头的表格

最新推荐文章于 2024-05-23 15:59:02 发布
最新推荐文章于 2024-05-23 15:59:02 发布
阅读量1.1w 收藏 35
点赞数 7
分类专栏： 前端 文章标签： ElementUI 多级表头 嵌套 表格 动态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenggering/article/details/103189818
版权

最近在搞前端开发，遇到个需求，要实现下面这样的列表：
在这里插入图片描述
点击某行的修改按钮，该行数据可编辑，并且按钮会随之变化：
在这里插入图片描述
点击删除，弹出确认弹框，点确认删除该行数据。
在这里插入图片描述
需求描述：
其中计划数量是要支持动态变化的，而阶段数量也要支持动态变化。比方说图中是3个计划，每个计划包含四个阶段。可能过段时间数据变成了2个计划，每个计划3个阶段，数据这样改变后，前端表格也要能正常显示。

而后台的接口也没提供，需要我自行确定了数据结构，做出显示逻辑。那么首先思考一下，难点有两个，一个是二级表头，一个是表头要支持动态变化。

我们的项目用的是用ElementUI库来实现布局的。表格组件对应的是el-table，在官方文档上查了下，是有官方的二级表头Demo的：

ElementUI官网链接：https://element.eleme.cn/2.0/#/zh-CN/component/table

官网给出的Demo，二级表头是写死的，不符合我们要求。不过它的demo给我提供了思路，那就是二级表头要用两层嵌套的el-table-column来实现。至于表头动态变化嘛，那就先确定了数据结构再说吧。

第一步：

根据需求，造出了所需要的最简单的一组数据(包含两条数据)：

list =
[
  {
    id: '123',
    name: '学校1',
    planList: [
      {
        planLable: '计划目标',
        stageList: [
          { stageLable: '第一阶段', value: '100' },
          { stageLable: '第二阶段', value: '200' },
          { stageLable: '第三阶段', value: '300' },
          { stageLable: '第四阶段', value: '400' }
        ]
      },
      {
        planLable: '基本目标',
        stageList: [
          { stageLable: '第一阶段', value: '10' },
          { stageLable: '第二阶段', value: '20' },
          { stageLable: '第三阶段', value: '30' },
          { stageLable: '第四阶段', value: '40' }
        ]
      },
      {
        planLable: '冲刺目标',
        stageList: [
          { stageLable: '第一阶段', value: '1000' },
          { stageLable: '第二阶段', value: '2000' },
          { stageLable: '第三阶段', value: '3000' },
          { stageLable: '第四阶段', value: '4000' }
        ]
      }
    ]
  },
  {
    id: '456',
    name: '学校2',
    planList: [
      {
        planLable: '计划目标',
        stageList: [
          { stageLable: '第一阶段', value: '1001' },
          { stageLable: '第二阶段', value: '2001' },
          { stageLable: '第三阶段', value: '3001' },
          { stageLable: '第四阶段', value: '4001' }
        ]
      },
      {
        planLable: '基本目标',
        stageList: [
          { stageLable: '第一阶段', value: '101' },
          { stageLable: '第二阶段', value: '201' },
          { stageLable: '第三阶段', value: '301' },
          { stageLable: '第四阶段', value: '401' }
        ]
      },
      {
        planLable: '冲刺目标',
        stageList: [
          { stageLable: '第一阶段', value: '10001' },
          { stageLable: '第二阶段', value: '20001' },
          { stageLable: '第三阶段', value: '30001' },
          { stageLable: '第四阶段', value: '40001' }
        ]
      }
    ]
  }
]

上面只有两条数据，就对应表格中的两行。

第二步：

把这个数据list传入表格进行显示。

<el-table v-loading="loading" :data="tableData" border style="width: 100%" row-key="id" stripe>
  <el-table-column align="center" fixed type="index" :index="indexMethod" label="序号" width="50" />
  <el-table-column align="center" fixed prop="name" label="分校名称" />
  <!--二级表头-->
  <el-table-column v-for="(planItem, index) in planList" :key="index" align="center" :label="planItem.planLable">
    <el-table-column v-for="(stageItem, indexChild) in planItem.stageList" :key="index+'-'+indexChild" align="center" :label="stageItem.stageLable">
      <template slot-scope="scope">
        <span v-if="scope.row.isEditing">
          <el-input v-model="scope.row.planList[index].stageList[indexChild].value" size="mini" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')" />
        </span>
        <span v-else>{{ scope.row.planList[index].stageList[indexChild].value }}</span>
      </template>
    </el-table-column>
  </el-table-column>
  <!--修改、删除等操作-->
  <el-table-column align="center" fixed="right" label="操作" width="150">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleData(scope.row, scope.$index)">{{ scope.row.isEditing?'保存':"修改" }}</el-button>
      <el-button v-if="!scope.row.isEditing" size="mini" type="danger" @click="deleteData(scope.row, scope.$index)">删除</el-button>
      <el-button v-else size="mini" @click="cancelEdit(scope.row, scope.$index)">取消</el-button>
    </template>
  </el-table-column>
</el-table>

其中第一行tableData就是我们自己造的数据。而二级表头传入的planList则是按如下规则获取的数据：

this.tableData = list;//list是之前构造好的两条数据
this.planList = (list[0] && list[0]['planList']) || [];

查看table里planList的用处就知道，这里planList只起到获取其子元素下标的作用，所以planList取了tableData的第一条数据（实际取哪一条都可以）。

完整的代码如下：

<template>
  <el-table v-loading="loading" :data="tableData" border style="width: 100%" row-key="id" stripe>
    <el-table-column align="center" fixed type="index" label="序号" width="50" />
    <el-table-column align="center" fixed prop="name" label="分校名称" />

    <el-table-column v-for="(planItem, index) in planList" :key="index" align="center" :label="planItem.planLable">
      <el-table-column v-for="(stageItem, indexChild) in planItem.stageList" :key="index+'-'+indexChild" align="center" :label="stageItem.stageLable">
        <template slot-scope="scope">
          <span v-if="scope.row.isEditing">
            <el-input v-model="scope.row.planList[index].stageList[indexChild].value" size="mini" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')" />
          </span>
          <span v-else>{{ scope.row.planList[index].stageList[indexChild].value }}</span>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column align="center" fixed="right" label="操作" width="150">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleData(scope.row, scope.$index)">{{ scope.row.isEditing?'保存':"修改" }}</el-button>
        <el-button v-if="!scope.row.isEditing" size="mini" type="danger" @click="deleteData(scope.row, scope.$index)">删除</el-button>
        <el-button v-else size="mini" @click="cancelEdit(scope.row, scope.$index)">取消</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {      
      loading: false,
      // 表格组件 列表数据对象
      tableData: [],
      planList: [],
      editRowJson: ''
    };
  },
  created() {
    this.initData();
  },

  methods: {
    /**
     * @method initData
     * @description 初始化数据
     */
    initData() {
      this.getList();
    },
    /**
     * @description 获取列表
     * @method getList
     */
    getList() {
      const list = [
        {
          id: '123',
          name: '学校1',
          planList: [
            {
              planLable: '计划目标',
              stageList: [
                { stageLable: '第一阶段', value: '100' },
                { stageLable: '第二阶段', value: '200' },
                { stageLable: '第三阶段', value: '300' },
                { stageLable: '第四阶段', value: '400' }
              ]
            },
            {
              planLable: '基本目标',
              stageList: [
                { stageLable: '第一阶段', value: '10' },
                { stageLable: '第二阶段', value: '20' },
                { stageLable: '第三阶段', value: '30' },
                { stageLable: '第四阶段', value: '40' }
              ]
            },
            {
              planLable: '冲刺目标',
              stageList: [
                { stageLable: '第一阶段', value: '1000' },
                { stageLable: '第二阶段', value: '2000' },
                { stageLable: '第三阶段', value: '3000' },
                { stageLable: '第四阶段', value: '4000' }
              ]
            }
          ]
        },
        {
          id: '456',
          name: '学校2',
          planList: [
            {
              planLable: '计划目标',
              stageList: [
                { stageLable: '第一阶段', value: '1001' },
                { stageLable: '第二阶段', value: '2001' },
                { stageLable: '第三阶段', value: '3001' },
                { stageLable: '第四阶段', value: '4001' }
              ]
            },
            {
              planLable: '基本目标',
              stageList: [
                { stageLable: '第一阶段', value: '101' },
                { stageLable: '第二阶段', value: '201' },
                { stageLable: '第三阶段', value: '301' },
                { stageLable: '第四阶段', value: '401' }
              ]
            },
            {
              planLable: '冲刺目标',
              stageList: [
                { stageLable: '第一阶段', value: '10001' },
                { stageLable: '第二阶段', value: '20001' },
                { stageLable: '第三阶段', value: '30001' },
                { stageLable: '第四阶段', value: '40001' }
              ]
            }
          ]
        }
      ];
      //   拿到列表数据
      this.tableData = list;
      this.planList = (list[0] && list[0]['planList']) || [];
    },
    /**
     * @method handleData
     * @description 编辑或者保存数据
     */
    handleData(row, index) {
      // 如果其他行正在编辑，必须先保存
      for (const schoolItem of this.tableData) {
        if (schoolItem.isEditing && schoolItem.id !== row.id) {
          this.$message({
            type: 'info',
            message: '请先保存正在编辑的行'
          });
          return;
        }
      }
      if (row.isEditing) {
        // 保存
        for (const planItem of row.planList) {
          // 有数据为空则不保存
          for (const stageItem of planItem.stageList) {
            if (stageItem.value === '') {
              this.$message({
                type: 'info',
                message: '数据不能为空'
              });
              return;
            }
          }
        }
        this.$set(row, 'isEditing', false)
      } else {
        // 编辑
        this.editRowJson = JSON.stringify(row);
        this.$set(row, 'isEditing', true)
      }
    },
    /**
     * @method cancelEdit
     * @description 退出编辑
     */
    cancelEdit(row, index) {
      var editRow = JSON.parse(this.editRowJson);
      row.planList = editRow.planList;
      row.isEditing = !row.isEditing;
    },
    /**
     * @method deleteData
     * @description 点击删除
     */
    deleteData(row, index) {
      this.$confirm('是否删除本条?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.tableData.splice(index, 1);
      })
      .catch(err => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  }
};
</script>

功能实现的解释

上面的代码除了能按需求显示列数变化的数据外，还做到了如下功能：

1.根据某一行是否正在编辑，动态确定“保存”、“取消”或者“修改”按钮的显示。
其中是否可编辑是通过v-if控制 el-input 或者 span 元素的显示来实现的。el-input 可编辑， span 不可编辑。

2.修改了数据后点击了“取消”按钮，数据要能恢复到修改前。
这里实现的思路是，修改前，把该行数据转成json保存。如果用户点击了“取消”，则从json恢复数据。

3.保证一次只能修改一行，要修改其他行，必须先保存或者取消当前修改（因为上面第二条里json字符串存储的只是最后一次点击的那一行数据，如果允许连续点击的话，取消后数据会乱。）
这里是通过遍历所有行数据，如果找到一个处于编辑状态且该行id与本行不同的，说明有其它行处于编辑状态。

4.限制只能输入数字，由如下代码实现。

oninput="value=value.replace(/[^\d]/g,'')"

5.删除某行数据的实现：

this.tableData.splice(index, 1);//删除从下标index开始的1条数据
此去正年少
关注
  • 7
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
elementui中树形表格切换展开不同层级
蜗牛~~
08-19 2355
elementui中树形表格切换展开不同层级。
Vue+ElementUI实现表单动态渲染、校验（二）
woaixuexi5155的博客
12-02 1118
Vue+ElementUI实现表单动态渲染、校验（二）2.动态渲染的表单添加校验 在Vue+ElementUI实现表单动态渲染、校验（一）中，主要分析了动态表单如何递归渲染。由于我们所给json文件限制，给出的检验规则并不能直接应用于element组件。所以需要进行进一步处理 2.动态渲染的表单添加校验 由于我们拿到的数据不能直接应用了于element组件，所以需要把每个字段的校验规则在一开始就初始化。 同样，先对数据进行递归，拿到最内层数据props，进行初始化 formattingData(node
vue-elementui表格实现双表头，插入input输入框
xcjhxh的博客
02-28 1551
vue-elementui表格实现双表头，插入input输入框
elementUI表格二级目录展示，自定义图标展开与收起
Hzq88888的博客
05-25 2013
收起： 展开： followListData数据格式： <el-table :data="followListData" ref="table" :row-class-name="tableRowClassName" style="width: 100%" > <el-table-column type="expand"> <templ...
element plus+vue3项目出现两个表头以及内容多样
最新发布
Joyous02的博客
05-23 313
element plus 默认的表格都是一个表头对应一个字段 但是组件内也有合并列以及合并行的属性，但是达不到想要的效果。这时候就需要用到template自定义插槽了 这边因为没有什么逻辑性 就直接展示代码了。如图中这种表格使用element plus和vue3该如何实现。
ElementUI 使用Table组件，绘制一个二维表格
weixin_53399156的博客
05-25 2529
elementUI 表格组件的灵活使用，建立二维表格
用element-ui渲染一个二级数据表格即复杂表格，并且自定标题
qq_49496611的博客
05-16 1539
【代码】用element-ui渲染一个二级数据表格即复杂表格，并且自定标题。
element 树形2级表格，设置默认选中
qq_26841153的博客
09-16 952
element 树形2级表格，设置默认选中
vue element-ui table二维数组表格合并列
weixin_43638614的博客
02-27 1511
vue element-ui table二维数组表格合并列
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
10-16
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有复杂表头和动态增加列的二维表格。Vue.js是一个轻量级、高性能的前端框架，而Element UI则提供了一系列易于使用的组件，使得开发过程更加...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
vue+elementUI实现表格关键字筛选高亮
12-29
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下 代码： <!-- 筛选 --> 筛选： 请输入关键字> <!--
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
Vue+ElementUI实现表单动态渲染、可视化配置的方法 本文主要介绍了使用 Vue+ElementUI 实现表单动态渲染、可视化配置的方法。该方法可以实现动态渲染表单、可视化配置，满足不同场景下的需求。 一、动态渲染的概念...
vue+java 实现动态多列表头
shiniar的博客
11-08 1514
vue前端和java后端实现动态多列表头
element ui table双层嵌套
weixin_59685936的博客
08-16 1415
element ui table双层嵌套
vue3 element-table实现左右两个表格左右滑动时一起联动
前端小白成长记
03-03 2717
vue3 element-table实现左右两个表格左右滑动时一起联动
两表数据 合并构建二级下拉（Map集合方式）基于element ui 的树状表格
qq_42250281的博客
01-03 218
【代码】两表数据 合并构建二级下拉（Map集合方式）基于element ui 的树状表格。
vue elementui 动态表头、表头合并、合并行、合并列、行根据某字段内容一致的进行合并、表格列展开收起功能
热门推荐
DarlingYL的博客
10-30 1万+
vue elementui 动态表头、表头合并、合并行、合并列、行根据某字段内容一致的进行合并、表格列展开收起功能
vue+ElementUI el-table表格再次封装集成多级表头合并单元格（表头分组、多级表头合并）及render渲染列
wocwin的博客
04-29 5790
1、此功能已集成到TTable组件中 2、最终效果 3、demo地址 GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档
vue+elementui 实现复杂表头和动态增加列的二维表格功能
09-08
实现复杂表头和动态增加列的二维表格功能，可以使用ElementUI的Table组件进行开发。首先，在Table组件中设置表头，可以通过嵌套表头来实现复杂的表头结构。例如，可以使用`<el-table-column>`标签来定义表头的每一列...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值