vue+element实现多级表头加树结构

最新推荐文章于 2024-05-11 11:49:12 发布
最新推荐文章于 2024-05-11 11:49:12 发布
阅读量892 收藏 1
点赞数
分类专栏： vue element 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuy_1314/article/details/134474455
版权
vue 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
element
5 篇文章 0 订阅
订阅专栏

标题两种展示方式

方式一

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

<template>
  <div class="box">
    <el-table
      ref="areaPointTable"
      :data="tableData"
      border
      :span-method="objectSpanMethod"
      :header-cell-style="tableHeaderMerge"
    >
      <el-table-column
        :prop="item.prop?item.prop:''"
        :label="item.titleName"
        align="center"
        v-for="(item, index) in tableHeader"
        :key="index"
      >
        <template slot-scope="{ row, column, $index }">
          <span
            v-if="column.property=='bigType'"
            @click="handleDeleteN(row, column, $index)"
            :class="row[item.prop] == '未达标' ? 'text-red' : ''"
            :style="row[item.prop] < 0 ? 'color:red;' : ''"
            style="cursor: pointer;"
          >
            {{
            isNaN(row[item.prop])?row[item.prop]:
            row[item.prop] >= 0
            ? row[item.prop]
            : Math.abs(row[item.prop])
            }}
          </span>
          <span
            v-else
            :class="row[item.prop] == '未达标' ? 'text-red' : ''"
            :style="row[item.prop] < 0 ? 'color:red;' : ''"
          >
            {{
            isNaN(row[item.prop])?row[item.prop]:
            row[item.prop] >= 0
            ? row[item.prop]
            : Math.abs(row[item.prop])
            }}
          </span>
        </template>
        <el-table-column
          :prop="iteam.prop"
          :label="iteam.titleName"
          align="center"
          v-for="(iteam, idx) in item.childTitle"
          :key="idx"
        >
          <template slot-scope="{ row }">
            <span
              :class="row[iteam.prop] == '未达标' ? 'text-red' : ''"
              :style="row[iteam.prop] < 0 ? 'color:red;' : ''"
            >
              {{
              isNaN(row[iteam.prop])?row[iteam.prop]:
              row[iteam.prop] >= 0
              ? row[iteam.prop]
              : Math.abs(row[iteam.prop])
              }}
            </span>
          </template>
        </el-table-column>
      </el-table-column>
    
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data() {
    return {
      input: '',
    
      tableHeader: [
        {
          titleName: '类型',
          childTitle: null,
          prop: 'bigType',
        },
        {
          titleName: '类型',
          childTitle: null,
          prop: 'smallType1',
        },
        {
          titleName: 'A',
          childTitle: [
            {
              titleName: 'a1',
              childTitle: null,
              prop: 'prop2',
            },
            {
              titleName: 'a2',
              childTitle: null,
              prop: 'prop3',
            },
          ],
        },
        {
          titleName: 'B',
          childTitle: [
            {
              titleName: 'b1',
              childTitle: null,
              prop: 'prop4',
            },
            {
              titleName: 'b2',
              childTitle: null,
              prop: 'prop5',
            },
            {
              titleName: 'b3',
              childTitle: null,
              prop: 'prop6',
            },
            {
              titleName: 'b4',
              childTitle: null,
              prop: 'prop7',
            },
          ],
        },
        {
          titleName: 'C',
          childTitle: [
            {
              titleName: 'c1',
              childTitle: null,
              prop: 'prop8',
            },
            {
              titleName: 'c2',
              childTitle: null,
              prop: 'prop9',
            },
            {
              titleName: 'c3',
              childTitle: null,
              prop: 'prop10',
            },
          ],
        },
        {
          titleName: 'D',
          childTitle: [
            {
              titleName: 'd1',
              childTitle: null,
              prop: 'prop11',
            },
            {
              titleName: 'd2',
              childTitle: null,
              prop: 'prop12',
            },
          ],
        },
        {
          titleName: 'W',
          childTitle: [
            {
              titleName: 'w1',
              childTitle: null,
              prop: 'prop13',
            },
            {
              titleName: 'w2',
              childTitle: null,
              prop: 'prop14',
            },
          ],
        },
      ],
      initTableData: [
        {
          id: 23,
          bigType: 'AA',
          smallType1: 'aa1',
          prop2: '1.0',
          prop3: '2.5',
          prop4: '40.0',
          prop5: '1.0',
          prop6: '2.5',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 38,
          bigType: 'AA',
          smallType1: 'aa2',
          prop2: '8.0',
          prop3: '100.0',
          prop4: '2.0',
          prop5: '8.0',
          prop6: '100.0',
          prop7: '达标',
          prop8: '8.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '6.0',
          prop12: '75.0',
          prop13: '8.0',
          prop14: '100.0',
        },
        {
          id: 53,
          bigType: 'AA',
          smallType1: 'aa3',
          prop2: '19.0',
          prop3: '47.5',
          prop4: '40.0',
          prop5: '19.0',
          prop6: '47.5',
          prop7: '未达标',
          prop8: '19.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '19.0',
          prop12: '100.0',
          prop13: '19.0',
          prop14: '100.0',
        },
        {
          id: 68,
          bigType: 'AA',
          smallType1: 'aa4',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
        },
        {
          id: 83,
          bigType: 'XX',
          smallType1: 'xx1',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 831,
          bigType: 'XX',
          smallType1: 'xx2',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 832,
          bigType: 'XX',
          smallType1: 'xx3',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          rowspan: 1,
        },
        {
          id: 98,
          bigType: 'QQ',
          smallType1: '-',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          rowspan: 1,
        },
        {
          id: 113,
          bigType: 'WW',
          smallType1: 'ww',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          rowspan: 1,
        },
        {
          id: 128,
          bigType: 'DD',
          smallType1: 'dd1',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 1281,
          bigType: 'DD',
          smallType1: 'dd2',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
        {
          id: 1282,
          bigType: 'DD',
          smallType1: 'dd3',
          prop2: '1.0',
          prop3: '1.25',
          prop4: '80.0',
          prop5: '1.0',
          prop6: '1.25',
          prop7: '未达标',
          prop8: '1.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '1.0',
          prop12: '100.0',
          prop13: '1.0',
          prop14: '100.0',
          rowspan: 1,
        },
      ],
      dialogTypeMergeArr: [
        {
          rowspan: 4,
          colspan: 1,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 0,
          colspan: 0,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
        {
          rowspan: 1,
          colspan: 1,
        },
      ],
      tableData: [],
      select_box: [],
    }
  },
  mounted() {
    this.dealTableData(this.initTableData)
    this.dialogHeaderMergeArr = this.mergeTableHeader(this.tableHeader)
  },
  methods: {
    tableHeaderMerge({ row, column, rowIndex, columnIndex }) {
      console.log(312312)
      if (rowIndex == 0) {
        this.$nextTick(() => {
          // row[columnIndex].colSpan=this.dialogHeaderMergeArr[columnIndex];
          if (document.getElementsByClassName(column.id).length !== 0) {
            document
              .getElementsByClassName(column.id)[0]
              .setAttribute('colSpan', this.dialogHeaderMergeArr[columnIndex])
          }
        })
        if (this.dialogHeaderMergeArr[columnIndex] == 0) {
          return { display: 'none' }
        }
      }
    },
    mergeTableHeader(data) {
      let countArr = []
      let labelArr = []
      data.map((item) => {
        labelArr = countArr.map((obj) => obj.label)
        if (item.childTitle) {
          countArr.push({
            label: item.titleName,
            colSpan: item.childTitle.length,
            hasChild: true,
          })
        } else {
          if (labelArr.includes(item.titleName)) {
            countArr.map((iteam) => {
              if (iteam.label == item.titleName) iteam.colSpan += 1
            })
          } else {
            countArr.push({
              label: item.titleName,
              colSpan: 1,
              hasChild: false,
            })
          }
        }
      })
      let tableHeaderCountArr = []
      countArr.map((item) => {
        if (!item.hasChild) {
          for (var i = 0; i < item.colSpan - 1; i++) {
            tableHeaderCountArr.push(0)
          }
        }
        tableHeaderCountArr.push(item.colSpan)
      })
      return tableHeaderCountArr
    },
    /**
     * 处理表格数据合并行
     */
    dealTableData(data) {
      //把日期相同的数据并排在一块
      const list = this.margePropData(data, 'bigType')
      //处理日期相同的合并
      this.tableData = this.mergeRows(list, 'bigType')
    },

    handleDeleteN(row, column, $index) {
      this.initTableData.filter((item, index) => {
        if (row.bigType === item.bigType && index !== $index) {
        }

        // row.bigType === item.bigType && index !== 0
      })
      let curChildern = this.tableData.filter(
        (item, index) => row.bigType === item.bigType && index !== $index
      )
      let curChildern_init = this.initTableData.filter(
        (item, index) => row.bigType === item.bigType && row.smallType1 !== item.smallType1
      )

      if (this.tableData.filter((item, index) => row.bigType === item.bigType).length == 1) {
        if (curChildern.length > 1) {
          this.tableData.push(...curChildern)

          this.dealTableData(this.tableData)
        } else {
          this.tableData.push(...curChildern_init)

          this.dealTableData(this.tableData)
          return
        }
      } else {
        let newTableData = this.tableData.filter(
          (e) => curChildern.filter((x) => e.id != x.id).length == curChildern.length
        )

        // this.tableData = newTableData
        // this.tableData = this.tableData.filter((it, i) => row.id === it.id)
        this.dealTableData(newTableData)
      }
    },

    /**
     * 合并行
     * @param row
     * @param column
     * @param rowIndex
     * @param columnIndex
     * @returns {{colspan: number, rowspan: (number|*)}}
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0].includes(columnIndex)) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        }
      }
      // if (column.property == 'bigType') {
      //   return this.dialogTypeMergeArr[rowIndex]
      // }
    },
    /**
     * 数组中，某个属性相同的数据放在一块，如把某个日期相同的相连一起
     * @param list 传入的数组
     * @param prop 那个属性相同的数据
     * @returns {*[]}
     */
    margePropData(list = [], prop) {
      let arr = [],
        tempArr = {}
      list.forEach((item) => {
        if (!tempArr[item[prop]]) {
          tempArr[item[prop]] = [item]
        } else {
          tempArr[item[prop]].push(item)
        }
      })
      for (const tempArrKey in tempArr) {
        arr = [...arr, ...tempArr[tempArrKey]]
      }
      return arr
    },
    /**
     * 根据当前数据的位置，在数组中插入数据
     * 如数组【1，2，4，5】想要在2后面插入3，
     *1：首先获取到2的下标，
     *2：然后获取要插入之前的数据，获取要插入之后的数据，中间就是插入的位置
     *3：最后把这三个按顺序合并就得到在想要的位置插入数据
     * @param list
     * @param index
     * @param target
     */
    insertArrPositionOfIndex(list = [], index = 0, target = {}) {
      //根据index 找出小于index的数据放在左边
      const leftList = list.filter((t, i) => i < index)
      //根据index 找出大于index的数据放在右边
      const rightList = list.filter((t, i) => i >= index)
      // 最终合并数据
      return [...leftList, target, ...rightList]
    },
    /**
     * 合并行
     * @param list
     * @param prop
     */
    mergeRows(list = [], prop) {
      list.forEach((ele) => {
        ele.rowspan = 1
      })
      const len = list.length
      for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
          if (list[i][prop] === list[j][prop]) {
            list[i].rowspan++
            list[j].rowspan--
          }
        }
        // 这里跳过已经重复的数据
        i = i + list[i].rowspan - 1
      }
      return list
    },
  },
  /**
   * 对象数组去重
   * @param arr 数组
   * @param prop 根据什么字段去重
   * @returns {any[]}
   */ arrayDeduplication(arr, prop) {
    let map = new Map()
    return arr.filter((item) => !map.has(item[prop]) && map.set(item[prop], 1))
  },
}
</script>

方式二

在这里插入图片描述

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :label="column.titleName"
      :prop="column.prop"
      :width="column.width"
      :align="column.align"
    >
      <template slot-scope="{ row, $index }">{{ row[column.prop] }}</template>
      <el-table-column
        v-if="column.childTitle"
        v-for="(subColumn, subIndex) in column.childTitle"
        :key="subIndex"
        :label="subColumn.titleName"
        :prop="subColumn.prop"
        :width="subColumn.width"
        :align="subColumn.align"
      >
        <template slot-scope="{ row, $index }">{{ row[subColumn.prop] }}</template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          bigType: 'AA',
          smallType1: 'aa1',
          prop2: '2.0',
          prop3: '5.0',
          prop4: '40.0',
          prop5: '2.0',
          prop6: '5.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '2.0',
          prop12: '100.0',
          prop13: '2.0',
          prop14: '100.0',
          children: [
            {
              bigType: 'aa1',
              smallType1: 'aa1',
              prop2: '2.0',
              prop3: '5.0',
              prop4: '40.0',
              prop5: '2.0',
              prop6: '5.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '2.0',
              prop12: '100.0',
              prop13: '2.0',
              prop14: '100.0',
              id: 2,
            },
            {
              bigType: 'aa2',
              smallType1: 'aa2',
              prop2: '8.0',
              prop3: '100.0',
              prop4: '2.0',
              prop5: '8.0',
              prop6: '100.0',
              prop7: '达标',
              prop8: '8.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '6.0',
              prop12: '75.0',
              prop13: '8.0',
              prop14: '100.0',
              id: 3,
            },
            {
              bigType: 'aa3',
              smallType1: 'aa3',
              prop2: '19.0',
              prop3: '47.5',
              prop4: '40.0',
              prop5: '19.0',
              prop6: '47.5',
              prop7: '未达标',
              prop8: '19.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '19.0',
              prop12: '100.0',
              prop13: '19.0',
              prop14: '100.0',
              id: 4,
            },
            {
              bigType: 'aa4',
              smallType1: 'aa4',
              prop2: '0.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '0.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '0.0',
              prop12: '0.0',
              prop13: '0.0',
              prop14: '0.0',
              id: 5,
            },
          ],
        },
        {
          id: 6,
          bigType: 'BB',
          prop2: '55.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '76.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '64.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '65.0',
          prop12: '85.53',
          prop13: '61.0',
          prop14: '80.26',
          children: [
            {
              bigType: 'bb1',
              smallType1: 'bb1',
              prop2: '55.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '76.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '64.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '65.0',
              prop12: '85.53',
              prop13: '61.0',
              prop14: '80.26',
              id: 7,
            },
            {
              bigType: 'bb2',
              smallType1: 'bb2',
              prop2: '55.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '76.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '64.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '65.0',
              prop12: '85.53',
              prop13: '61.0',
              prop14: '80.26',
              id: 17,
            },
          ],
        },
        {
          id: 8,
          bigType: 'DD',
          prop2: '0.0',
          prop3: '0.0',
          prop4: '0.0',
          prop5: '0.0',
          prop6: '0.0',
          prop7: '未达标',
          prop8: '0.0',
          prop9: '0.0',
          prop10: '0.0',
          prop11: '0.0',
          prop12: '0.0',
          prop13: '0.0',
          prop14: '0.0',
          children: [
            {
              bigType: 'dd1',
              smallType1: 'dd1',
              prop2: '0.0',
              prop3: '0.0',
              prop4: '0.0',
              prop5: '0.0',
              prop6: '0.0',
              prop7: '未达标',
              prop8: '0.0',
              prop9: '0.0',
              prop10: '0.0',
              prop11: '0.0',
              prop12: '0.0',
              prop13: '0.0',
              prop14: '0.0',
              id: 9,
            },
          ],
        },
      ],
      columns: [
        {
          titleName: '类型',
          childTitle: null,
          prop: 'bigType',
        },

        {
          titleName: 'A',
          childTitle: [
            {
              titleName: 'a1',
              childTitle: null,
              prop: 'prop2',
            },
            {
              titleName: 'a2',
              childTitle: null,
              prop: 'prop3',
            },
          ],
        },
        {
          titleName: 'B',
          childTitle: [
            {
              titleName: 'b1',
              childTitle: null,
              prop: 'prop4',
            },
            {
              titleName: 'b2',
              childTitle: null,
              prop: 'prop5',
            },
            {
              titleName: 'b3',
              childTitle: null,
              prop: 'prop6',
            },
            {
              titleName: 'b4',
              childTitle: null,
              prop: 'prop7',
            },
          ],
        },
        {
          titleName: 'C',
          childTitle: [
            {
              titleName: 'c1',
              childTitle: null,
              prop: 'prop8',
            },
            {
              titleName: 'c2',
              childTitle: null,
              prop: 'prop9',
            },
            {
              titleName: 'c3',
              childTitle: null,
              prop: 'prop10',
            },
          ],
        },
        {
          titleName: 'D',
          childTitle: [
            {
              titleName: 'd1',
              childTitle: null,
              prop: 'prop11',
            },
            {
              titleName: 'd2',
              childTitle: null,
              prop: 'prop12',
            },
          ],
        },
        {
          titleName: 'W',
          childTitle: [
            {
              titleName: 'w1',
              childTitle: null,
              prop: 'prop13',
            },
            {
              titleName: 'w2',
              childTitle: null,
              prop: 'prop14',
            },
          ],
        },
      ],
    }
  },
}
</script>
星星上的程序媛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element-ui动态生成多级表头的方法
10-18
今天小编就为大家分享一篇vue+element-ui动态生成多级表头的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element UI动态生成多级表头
qq_42794545的博客
11-16 5637
层数是可变化的，所以需要专门设置一个表格的数据来保存表头，然后通过v-for="item in tableColData"的方式来循环展示表头，由于层数是循环展示表头的，所以如果层数里面如果有第二级别的表头，就需要在表头数据多设置一级children，加上第二层v-for="item1 in item.children"来遍历二级表头。由于项目的需求，需要根据用户自定义的方式来初始化表格的表头包含哪些信息，有很多信息是有规律的，所以我们需要Element UI动态生成多级表头。
element-plus的Table 表格之树形数据与懒加载
最新发布
weixin_50975849的博客
05-11 569
总结一下最近写的基础版树形表格的懒加载，本次实例的应用中，和后端同事沟通返回指定字段isChildren，让子节点表格绑定字段和父节点表格绑定字段能够灵活处理，同时还修改了表格的样式。🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！🔮 本文由 【第四人称Alice】 原创，首发于 CSDN ✨✨✨。声明：博主的项目是vue3+ts，node版本18.18.2。
element-el-table 多级表头
qq_42769032的博客
02-16 696
多级表头
elementUI，自定义表头，多层级表头，表头合并，行内容一致的合并行
qq_43807473的博客
05-19 6035
table多级表头，自定义table表头，elementUi 自定义表头input框无法输入，表头合并，行内容一致的跨行合并，table动态新增列的时候表格中间出现一大片空白，样式错乱。
一文掌握elementUI构建复杂表格，合并行或列，多级表头等
风中追风
01-02 5523
前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~
vue+element实现大文件上传
07-04
vue+element实现大文件上传
vue+ java 实现多级菜单递归效果
08-25
Vue+Java 实现多级菜单递归效果 本文主要介绍了使用 Vue 和 Java 实现多级菜单递归效果，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值。下面是相关知识点的详细解释： 一、Vue 官方示例代码 在本文...
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue+element+Java实现批量删除功能
10-17
主要介绍了vue+element+Java实现批量删除功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
el-table多级表头，合并表头，设置样式
weixin_52618969的博客
05-26 2941
el-table 合并表头，多级表头，设置样式
element树形表格动态表头（附带删除）
m0_49789433的博客
03-15 982
描述问题 树形表格无法动态添加表头 我们要的效果是这样的 创建treeTable 页面（组件） <template> <div> <el-table :data="tableData1" style="width: 100%" row-key="id" lazy :load="load" :tree-props
Vue实现横向展开树组件功能
weixin_42522127的博客
06-21 2137
由于业务需要产品要求实现一个横向展开的树结构看了下elementui的组件没有符合我要求的于是只能自己写一个。 要求如下： 1.每一层级最多有四个菜单超过要换行 2.层级没有限制可多可少 3.每个层级的颜色都不一样 直接上代码 //父组件 <template> <div> <treeNode :nodeList="list"></treeNode> </div> </template> <srcipt&g
vue 3 element-plus el-table纵向多级表头
GoodLuck_yyh的博客
12-05 1509
vue 3 element-plus el-table纵向多级表头
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
蓝胖子的博客
12-06 1万+
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
element plus 表el-table的多级表头/动态表头处理
qq_27936291的博客
08-25 7466
element plus 表el-table的多级表头/动态表头处理，这个涉及数据结构处理，整理成符合element plus渲染的数据结构
如何使用vue-table-with-tree-grid树形表格组件 _@jie
tattoo_jie的博客
09-16 922
如何使用vue-table-with-tree-grid树形表格组件 1.假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。 2.如果你是使用vue ui搭建的项目，使用时操作如下; 2.1: 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 ​ 2.2:打开main.js，导入vue-table-with-tree-grid i
原生table-多级表头【广度优先实现】
dabaooooq的博客
02-09 1882
既然提到多级表头，合并行合并列肯定少不了，先把树结构处理为一层数据结构，然后计算合并行，每个节点需要合并的行数需要判断一下 当前节点的层级是否不等于整个树结构的最大层级并且当前节点下是否有子节点，如果满足上述条件，则需要合并行，合并的数量为：最大层级数 - 当前节点层级 + 1；然后是合并列，每个节点合并的列数为：无子级节点1,、有子级节点：当前节点下所有子级数量的和；在给每个节点做好需要合并的行列数的标识后，可以开始处理用来循环表头的数据。处理一个二维数组，每项的数组中分别存放的是层级相同的节点，[[1,
Vue+ELementUI主页布局----侧边栏布局（el-aside）
热门推荐
weixin_51351637的博客
10-04 3万+
第一节Login.vue登录表单知识： Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址：Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token，保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开
vue+element ui实现树形表格
09-06
Vue Element UI可以通过使用Element UI的Table组件和El-Tree组件来实现树形表格。 首先，我们需要在Vue项目中引入Element UI库。可以通过npm安装Element UI，并在main.js中引入所需的组件。 接下来，在Vue组件中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值