vue elementui 动态表头、表头合并、合并行、合并列、行根据某字段内容一致的进行合并、表格列展开收起功能

已于 2024-03-08 09:20:09 修改
阅读量1.4w 收藏 102
点赞数 20
分类专栏： js vue开发学习 elementUi 文章标签： vue.js elementui 前端
于 2023-10-30 17:00:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DarlingYL/article/details/134121003
版权
vue开发学习 同时被 3 个专栏收录
31 篇文章 2 订阅
订阅专栏
js
18 篇文章 0 订阅
订阅专栏
elementUi
18 篇文章 1 订阅
订阅专栏

一、案例：表头（二级表头）合并、首列数据相同合并

效果图：
在这里插入图片描述

1、表头第1、2列合并

在这里插入图片描述

第一种写法（普通表头）：

<el-table
      ref="main"
      :data="tableData"
      border
      :header-cell-style="headerStyle"
      style="width: 100%;">
      <el-table-column align="center" width="40" label="年级" fixed prop="nj" />
      <el-table-column align="center" width="80" label="班级" fixed prop="bj" />
</el-table>

methods: {
    headerStyle({ row, column, rowIndex, columnIndex }) {
      const comStyle = {
        backgroundColor: "#4095e5",
        color: "#fff",
        fontSize: "500",
      };
      if (rowIndex === 0) {
        row[0].colSpan = 0; // 将表头第一列和第二列合并，内容展示为第二列的内容
        row[1].colSpan = 2;
        if (columnIndex === 0) { // 将表头第一列隐藏
          return {
            display: "none",
            ...comStyle,
          };
        }
      }
      return comStyle;
    },
}

第2种写法（二级表头）：

<el-table
      ref="main"
      :data="tableData"
      border
      :header-cell-style="headerStyle"
      style="width: 100%;">

      <el-table-column align="center" label="班级" width="120">
        <el-table-column align="center" width="40" prop="nj" />
        <el-table-column align="center" width="80" prop="bj" />
      </el-table-column>
</el-table>

headerStyle({ row, column, rowIndex, columnIndex }) {
      const comStyle = {
        backgroundColor: "#4095e5",
        color: "#fff",
        fontSize: "500",
      };
      // 1.1 让第0行的第0列跨2行
      if (rowIndex === 0 && columnIndex === 0) {
        this.$nextTick(() => {
          document
            .getElementsByClassName(column.id)[0]
            .setAttribute("rowSpan", 2);
          return comStyle;
        });
      }
      // 1.2 被覆盖的进行隐藏
      if (rowIndex === 1 && (columnIndex == 0 || columnIndex == 1)) {
        return {
          display: "none",
          ...comStyle,
        };
      }
      return comStyle;
    },

2、行根据某字段内容一致的进行合并

在这里插入图片描述
给表格增加属性:span-method="spanMethod"
在这里插入图片描述

spanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log('row', row, 'column', column, 'rowIndex', rowIndex, 'columnIndex', columnIndex);
      //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
      const fields = ['nj']
      // 当前行的数据
      const cellValue = row[column.property]
      if (rowIndex == 0) { // 实现表头下面第一行数据，第一列合计展示时2列合并
          if (columnIndex === 0) {
            return {rowspan: 1, colspan: 0} // 隐藏表头下面第一行的第一列
          }
          if (columnIndex === 1) {
            return {rowspan: 1, colspan: 2} // 将表头下面第一行的第一列和第二列合并
          }
        }

        // 判断只合并定义字段的列数据
        if (cellValue && fields.includes(column.property)) {
          const prevRow = this.tableData[rowIndex - 1] //上一行数据
          let nextRow = this.tableData[rowIndex + 1] //下一行数据
          // 当上一行的数据等于当前行数据时，当前行单元格隐藏
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
            let countRowspan = 1 //用于合并计数多少单元格
            while (nextRow && nextRow[column.property] === cellValue) {
              nextRow = this.tableData[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
    },

3、完整示例代码

在这里插入图片描述
在这里插入图片描述

<template>
  <div class="page-wrapper">
    <div class="search-wrapper">
      <el-row type="flex" justify="space-between">
        <div class="search-item width-31">
          <el-radio-group v-model="type">
            <el-radio :label="1">按班级汇总</el-radio>
            <el-radio :label="2">按年级汇总</el-radio>
          </el-radio-group>
        </div>
        <div class="search-item margin-right-0">
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini" type="primary" plain>重置</el-button>
          <el-button size="mini" type="primary" icon="el-icon-download" plain>导出</el-button>
        </div>
      </el-row>
    </div>
    <el-table
      ref="main"
      :data="tableData"
      border
      :header-cell-style="headerStyle"
      :span-method="spanMethod"
      style="width: 100%;">
      <template v-if="type === 1">
        <el-table-column align="center" width="40" label="年级" fixed prop="nj" />
        <el-table-column align="center" width="80" label="班级" fixed prop="bj" />
      </template>
      <template v-if="type === 2">
        <el-table-column align="center" width="100" label="年级" fixed prop="type" />
      </template>
      <el-table-column align="center" label="人数">
        <el-table-column align="center" label="男" prop="num1" />
        <el-table-column align="center" label="女" prop="money1" />
      </el-table-column>
      <el-table-column align="center" width="160" prop="num2">
        <template slot="header">
          <div class="expand-header-wrapper">
            <span class="title">姓名</span>
            <span class="btn" @click="showColumn('open1')">{{!open1 ? '+展开' : '-收起'}}</span>
          </div>
        </template>
      </el-table-column>
      <template v-if="open1">
        <el-table-column
          v-for="item in colunms1"
          :key="'姓名_' + item.name"
          :label="item.name"
          :label-class-name="'more-header'"
          align="center">
          <el-table-column
            v-for="citem in item.children"
            :key="'姓名_' + item.name + citem.name"
            :label="citem.name"
            :prop="citem.prop"
            :label-class-name="'more-header'"
            align="center"/>
        </el-table-column>
      </template>
      <el-table-column align="center" min-width="200" prop="num2">
        <template slot="header">
          <div class="expand-header-wrapper">
            <span class="title">地址</span>
            <span class="btn" @click="showColumn('open2')">{{!open2 ? '+展开' : '-收起'}}</span>
          </div>
        </template>
      </el-table-column>
      <template v-if="open2">
        <el-table-column
          v-for="item in colunms2"
          :key="'地址_' + item.name"
          :label="item.name"
          :label-class-name="'more-header'"
          align="center">
          <el-table-column
            v-for="citem in item.children"
            :key="'地址_' + item.name + citem.name"
            :label="citem.name"
            :prop="citem.prop"
            :label-class-name="'more-header'"
            align="center"/>
        </el-table-column>
      </template>
      <el-table-column align="center" width="100" prop="num2">
        <template slot="header">
          <div class="expand-header-wrapper">
            <span class="title">排名</span>
            <span class="btn" @click="showColumn('open3')">{{!open3 ? '+展开' : '-收起'}}</span>
          </div>
        </template>
        <template>
          <el-table-column align="center" label="年排" prop="num6" />
          <el-table-column align="center" label="班排" prop="money6" />
        </template>
      </el-table-column>
      <template v-if="open3">
        <el-table-column
          v-for="item in colunms3"
          :key="'排名_' + item.name"
          :label="item.name"
          :label-class-name="'more-header'"
          align="center">
          <el-table-column
            v-for="citem in item.children"
            :key="'排名_' + item.name + citem.name"
            :label="citem.name"
            :prop="citem.prop"
            :label-class-name="'more-header'"
            align="center"/>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      type: 1,
      tableData: [
        { nj: '合计', type: '合计', bj: '合计', num1: "1111", money1: "1111", num2: "1111", money2: "1111", sale: '111', num3: -2129, money3: "111", num4: "111", money4: "111", num5: "111", money5: "1111",},
        { nj: '初一', type: '初一', bj: "1班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初一', type: '初一', bj: "2班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初一', type: '初一', bj: "3班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初二', type: '初二', bj: "1班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初二', type: '初二', bj: "2班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初二', type: '初二', bj: "3班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初三', type: '初三', bj: "1班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初三', type: '初三', bj: "2班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '初三', type: '初三', bj: "3班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '高一', type: '高一', bj: "1班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '高一', type: '高一', bj: "2班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '高一', type: '高一', bj: "3班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '高二', type: '高二', bj: "1班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '高二', type: '高二', bj: "2班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
        { nj: '高三', type: '高三', bj: "1班", num1: "1", money1: "1", num2: "1", money2: "1", sale: '1', num3: "1", money3: "1", num4: "1", money4: "1", num5: "1", money5: "1",},
      ],
      open1: false,
      open2: false,
      open3: true,
      colunms1: [
        {
          name: "外形",
          children: [
            { name: "身高", prop: "num3" },
            { name: "体重", prop: "money3" },
          ],
        },
        {
          name: "发型",
          children: [
            { name: "颜色", prop: "num4" },
            { name: "长短", prop: "money4" },
          ],
        },
      ],
      colunms2: [
        {
          name: "省市",
          children: [
            { name: "省份", prop: "num3" },
            { name: "城市", prop: "money3" },
          ],
        },
        {
          name: "区域",
          children: [
            { name: "区域", prop: "num4" },
            { name: "街道", prop: "money4" },
          ],
        },
        {
          name: "村委",
          children: [
            { name: "村落", prop: "money5" },
            { name: "门牌", prop: "money5" },
          ],
        },
        {
          name: "人员情况",
          children: [
            { name: "兄弟", prop: "money5" },
            { name: "姐妹", prop: "money5" },
          ],
        },
      ],
      colunms3: [
        {
          name: "主科",
          children: [
            { name: "语文", prop: "num3" },
            { name: "数学", prop: "money3" },
            { name: "英语", prop: "money3" },
          ],
        },
        {
          name: "其他文科学科",
          children: [
            { name: "历史", prop: "num4" },
            { name: "政治", prop: "money4" },
            { name: "地理", prop: "money4" },
          ],
        },
        {
          name: "其他理科学科",
          children: [
            { name: "物理", prop: "num4" },
            { name: "生物", prop: "money4" },
            { name: "化学", prop: "money4" },
          ],
        },
      ],
    }
  },
  created() {},
  methods: {
    /** 表头合并控制 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      const comStyle = {
        backgroundColor: "#4095e5",
        color: "#fff",
        fontSize: "500",
      };
      /*
        // 1.1 让第0行的第0列跨2行
        if (rowIndex === 0 && columnIndex === 0) {
          this.$nextTick(() => {
            document
              .getElementsByClassName(column.id)[0]
              .setAttribute("rowSpan", 2);
            return comStyle;
          });
        }
        // 1.2 被覆盖的进行隐藏
        if (rowIndex === 1 && (columnIndex == 0 || columnIndex == 1)) {
          return {
            display: "none",
            ...comStyle,
          };
        } */
      if (this.type === 1 && rowIndex === 0) {
        row[0].colSpan = 0; // 将表头第一列和第二列合并，内容展示为第二列的内容
        row[1].colSpan = 2;
        if (columnIndex === 0) { // 将表头第一列隐藏
          return {
            display: "none",
            ...comStyle,
          };
        }
      }
      return comStyle;
    },
    /** 合并行、列 */
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log('row', row, 'column', column, 'rowIndex', rowIndex, 'columnIndex', columnIndex);
      //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
      let fields = []
      if (this.type === 1) {
        fields.push('nj')
      } else {
        fields.push('type')
      }
      // 当前行的数据
      const cellValue = row[column.property]
      if (this.type === 1 && rowIndex == 0) {
          if (columnIndex === 0) {
            return {rowspan: 1, colspan: 0} // 隐藏表头下面第一行的第一列
          }
          if (columnIndex === 1) {
            return {rowspan: 1, colspan: 2} // 将表头下面第一行的第一列和第二列合并
          }
        }

        // 判断只合并定义字段的列数据
        if (cellValue && fields.includes(column.property)) {
          const prevRow = this.tableData[rowIndex - 1] //上一行数据
          let nextRow = this.tableData[rowIndex + 1] //下一行数据
          // 当上一行的数据等于当前行数据时，当前行单元格隐藏
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
            let countRowspan = 1 //用于合并计数多少单元格
            while (nextRow && nextRow[column.property] === cellValue) {
              nextRow = this.tableData[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
    },
    /** 展开列 */
    showColumn(key) {
      this[key] = !this[key]
      this.$nextTick(() => {
        // 由于elementui框架问题，展开列后表格高度变小，需要重新布局、渲染表格
        this.$refs.main.doLayout();
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../static/styles/page.scss';

::v-deep .el-radio-group label {
  width: 100px !important;
}

.expand-header-wrapper {
  position: relative;
  .btn {
    position: absolute;
    right: 10px;
    color: #fefa83;
    text-decoration: underline;
    font-style: italic;
    cursor: pointer;
  }
}
::v-deep .el-table__header {
  .more-header {
    background: #cba43f !important;
  }
}

::v-deep .el-table__row:first-child .cell{
  color: #333;
  font-weight: 700;
  &:first-child {
    font-style: italic;
  }
}
</style>

二、案例：表头合并（二级表头）、首列数据相同合并、最后一列根据首列字段相同合并行

效果图：
在这里插入图片描述

2.1 实现代码

<el-table
        ref="overTargetDetailsTable2222"
        :data="tableData2"
        border
        :header-cell-style="spanHeader2"
        :span-method="spanMethod2">
        <el-table-column align="center" prop="city" label="区域" fixed width="100" />
        <el-table-column align="center" prop="region" label="城市" fixed width="120" />
        <el-table-column align="center" label="基础信息">
          <el-table-column align="center" label="姓名" prop="name"></el-table-column>
          <el-table-column align="center" label="性别" prop="sex"></el-table-column>
          <el-table-column align="center" label="年龄" prop="age"></el-table-column>
          <el-table-column align="center" label="身高" prop="height"></el-table-column>
          <el-table-column align="center" label="体重" prop="weight"></el-table-column>
          <el-table-column align="center" label="爱好" min-width="300" prop="like"></el-table-column>
        </el-table-column>
      </el-table>

data() {
	return {
		tableData2: [
        {
          city: '上海',
          region: '普陀',
          name: '张三',
          sex: '女',
          age: '22',
          height: '162',
          weight: '100',
          like: '打游戏',
        },
        {
          city: '上海',
          region: '黄埔',
          name: '张三2',
          sex: '男',
          age: '23',
          height: '172',
          weight: '140',
          like: '',
        },
        {
          city: '上海',
          region: '徐汇',
          name: '张三3',
          sex: '女',
          age: '25',
          height: '162',
          weight: '100',
          like: '',
        },
        {
          city: '陕西',
          region: '西安',
          name: 'A',
          sex: '女',
          age: '25',
          height: '162',
          weight: '100',
          like: '跳舞',
        },
        {
          city: '江苏',
          region: '南京',
          name: '李四',
          sex: '男',
          age: '22',
          height: '162',
          weight: '130',
          like: '打篮球',
        },
        {
          city: '江苏',
          region: '苏州',
          name: '李四2',
          sex: '女',
          age: '20',
          height: '162',
          weight: '90',
          like: '',
        },
        {
          city: '江苏',
          region: '无锡',
          name: '李四3',
          sex: '男',
          age: '28',
          height: '182',
          weight: '150',
          like: '',
        },
        {
          city: '浙江',
          region: '杭州',
          name: '王五',
          sex: '女',
          age: '19',
          height: '162',
          weight: '130',
          like: '唱歌',
        },
        {
          city: '浙江',
          region: '宁波',
          name: '王五2',
          sex: '男',
          age: '29',
          height: '170',
          weight: '170',
          like: '',
        },
        {
          city: '浙江',
          region: '嘉兴',
          name: '王五3',
          sex: '女',
          age: '19',
          height: '162',
          weight: '130',
          like: '',
        },
      ],
	}
}


/** 表头合并控制 */
    spanHeader2({ row, column, rowIndex, columnIndex }) {
      let comStyle = {};
        // 1.1 让第0行的第0列跨2行
        if (rowIndex === 0) {
          row[0].colSpan = 0; // 将表头第一列和第二列合并，内容展示为第二列的内容
          row[1].colSpan = 2;
          if (columnIndex === 0) { // 将表头第一列隐藏
            return {
              display: "none",
            };
          }
        }
      return comStyle;
    },
    /** 合并行、列 */
    spanMethod2({ row, column, rowIndex, columnIndex }) {
      // console.log('row', row, 'column', column, 'rowIndex', rowIndex, 'columnIndex', columnIndex);
      if (columnIndex === 0) {
        //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
        const fields = ['city']
        // 当前行的数据
        const cellValue = row[column.property]
        let countRowspan = 1 //用于合并计数多少单元格
        // 判断只合并定义字段的列数据
        if (cellValue && fields.includes(column.property)) {
          const prevRow = this.tableData2[rowIndex - 1] //上一行数据
          let nextRow = this.tableData2[rowIndex + 1] //下一行数据
          // 当上一行的数据等于当前行数据时，当前行单元格隐藏
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
            let countRowspan = 1 //用于合并计数多少单元格
            while (nextRow && nextRow[column.property] === cellValue) {
              nextRow = this.tableData2[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      }
      if (columnIndex === 7) {
        const prevRow2 = this.tableData2[rowIndex - 1] //上一行数据
        let nextRow2 = this.tableData2[rowIndex + 1] //下一行数据
        // 当上一行的数据等于当前行数据时，当前行单元格隐藏
        if (prevRow2 && prevRow2.city === row.city) {
          return { rowspan: 0, colspan: 0 }
        } else {
          // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
          let countRowspan2 = 1 //用于合并计数多少单元格
          while (nextRow2 && nextRow2.city === row.city) {
            nextRow2 = this.tableData2[++countRowspan2 + rowIndex]
          }
          if (countRowspan2 > 1) {
            return { rowspan: countRowspan2, colspan: 1 }
          }
        }
      }
    },
拾一九
关注
专栏目录
vue+element-ui table表格的一些组件，包括表格的多级表头，行和列的合并和表格的合计方法
03-17
目前有三个关于table表格的一些组件，第一，多级表头的组件，包括固定字段多级表头、单一字段名动态字段值多级表头、多级字段名动态字段值多级表头；第二，表头合并，表格内容的行合并和列合并；第三，表格合计方法：多行合计方法，实时计算表格输入值的合计值方法。表格内容为静态数据，只是针对表格组件的操作方法
关于el-table列的单元格合并
weixin_44270521的博客
05-23 1986
关于表格合并
elementui完美做到table动态复杂合并行、合并列，适用于vue2、vue3
最新发布
weixin_44953151的博客
09-26 1496
elementui完美做到动态合并行、合并列，适用于vue2、vue3
elementui 动态表头
A_droid的博客
09-23 1863
最近，在用elementui做一个动态表头的功能，把自己开发的流程大概分享一下。 首先，我们得了解这个option的作用： 这个:option属性就是绑定我们列表表格的模板。通过引入我们写好的js文件来构成一个表格。 这个js文件我也贴一部分代码出来介绍一下 可以看出来，这个column就是我们的列数组。那么，做法上大体上就确定了，把动态的列对象加入到这个column数组即可。 那么，什么时候加入呢？当然是要在页面渲染之前加入啦，这个时候就要介绍一下vue的生命周期函数，也叫钩子函数。
【element-ui】el-table合并列+合并行
weixin_48847755的博客
06-21 1035
el-table合并行或列
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
泶雪乖女
04-07 8847
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。我们可以看到，所有列，只要数据相同的单元格都被合并了，包括我不想合并的单元格，这时候就要。只需要加个if判断即可指定要合并哪些列。这样就只合并了我们指定的那几列了。这时候再看，就是我们想要的效果了。
vue+elementUI搭建动态表头的表格
weixin_46058007的博客
03-29 2455
vue结合elementUI搭建动态表头的表格，根据表头的列名去映射表格每一列的内容
element UI 动态生成表头
nihao561的博客
02-03 6634
element UI 动态生成表头 拖拽
element ui 动态显示表格表头
weixin_56119955的博客
07-26 1010
【代码】element ui 动态显示表格表头。
Vue 中 Element UI 的 el-table 组件实现动态表头和内容
强者惜字如金，弱者废话连篇！
01-18 2777
Vue 中 Element UI 的 el-table 组件实现动态表头和内容。
P4-VUE3-Element组件库-表格组件
Bruce小鬼
02-04 2046
P4-VUE3-Element组件库-表格组件 1.概述 这篇文章继续介绍Element组件库的表格组件，在开发中表格也是常用内容。 2.创建组件 2.1.新建Table.vue 2.2.配置组件路由 2.3.创建组件效果展示 3.表格组件 3.1.表格基本使用 复制官网表格HTML部分内容 复制官网表格JS部分内容 应用Table.vue <template> <div> <el-table :data="tableData" st
element动态table表头以及属性
12-19
原ui库为ivew库，需求加载动态table表头以及动态过滤不同数据，时间类为引入时间插件非单纯数据，其余为chebox类型，如不引入ivew,将里面组件替换成elment对应组件即可
vue element 中的table动态渲染实现（动态表头）
10-15
主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
10-16
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有复杂表头和动态增加列的二维表格。Vue.js是一个轻量级、高性能的前端框架，而Element UI则提供了一系列易于使用的组件，使得开发过程更加...
vue3 - 详解element-plus表格table组件，将表格每行 “相同元素合并“，例如表格列表如果遇到id一样或值一样就判断是一个数组把单元格合并掉，将连续相同内容的单元格合并行详细示例代码
高级前端工程师
07-18 3614
vue3，element plus，vue.js，elementUI饿了么，表格，table，组件，el-table，表格合并，合并列，合并单元格，拆分，表格动态合并相同数据单元格，可指定列+自定义合并条件，怎么把表格相同的数据 合并为一行，表格合并头,多级表头,合并列,行根据某字段内容一致的进行合并，vue3中 elment-plus table合并上下两行相同数据单元格，使用el-table,将连续相同内容的单元格合并行，多级合并单元格方式，根据列内容相同的值自动合并单元格，自定义列的合并规则，合并id
Vue Table动态表头 数据合并行或列
weixin_43652669的博客
02-16 1548
效果如图： 功能描述： 1.根据选择时间，找出某月的第一天到最后一天，并对应星期，动态生成表头； 2. 数据中姓名、时间、名称相同的合并行 实现： <template> <div> <Divider orientation="left"> <DatePicker v-model="theMonth" type="month" @on-change="changeDate" placeholder="请选择年月" st
elementui table 动态表头表格（根据后台返回显示动态数据）
m0_53553562的博客
09-06 5504
vue+elementui 实现动态表头表体
element ui 的多级表头的动态生成
weixin_70955790的博客
08-15 810
TableColumn.vue(主要是使用递归来对表头进行循环生成)1.需封装两个组件一个为DynamicTable.vue。
vue+elementui 实现复杂表头和动态增加列的二维表格功能
09-08
Vue ElementUI是一个基于Vue.js的UI组件库，可以用于快速构建web应用的界面。 实现复杂表头和动态增加列的二维表格功能，可以使用ElementUI的Table组件进行开发。首先，在Table组件中设置表头，可以通过嵌套表头来实现复杂的表头结构。例如，可以使用`<el-table-column>`标签来定义表头的每一列，并使用`prop`属性来绑定数据源中的字段。可以通过`label`属性设置每一列的表头名称。 要实现动态增加列的功能，可以绑定一个数组来存储要显示的列。例如，可以在data中定义一个columns数组，用于存储要显示的列的配置信息。在Table组件中，通过`v-for`循环遍历columns数组，动态生成`<el-table-column>`标签，并通过`prop`属性和`label`属性绑定列的字段和表头名称。 在页面中，可以使用按钮来实现增加列的功能。当点击增加列的按钮时，可以向columns数组中添加一个新的列的配置信息，然后自动重新渲染表格，实现动态增加列的效果。 通过以上步骤，就可以实现复杂表头和动态增加列的二维表格功能。使用Vue ElementUI的Table组件，配合绑定的数据和事件处理，可以方便地实现这个功能，并且保证了界面的交互和用户体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值