vxe表格指定条件行合并

<template>
  <section class="container">
    <vxe-table
      border
      resizable
      height="300"
      :scroll-y="{ enabled: false }"
      :span-method="mergeRowMethod"
      :data="tableData3">
      <vxe-column
        type="seq"
        width="60"></vxe-column>
      <vxe-column
        field="key"
        title="Key"></vxe-column>
      <vxe-column
        field="content"
        title="Translate"></vxe-column>
      <vxe-column
        field="language"
        title="Language"
        :filters="[
          { label: '中文', value: 'zh_CN' },
          { label: 'English', value: 'en_US' },
        ]"></vxe-column>
        <vxe-column
        field="aaa"
        title="aaa"></vxe-column>
        <vxe-column
        field="bbb"
        title="bbb"></vxe-column>
    </vxe-table>
  </section>
</template>

<script>
  export default {
    name: 'VxeSpanMethodDemo',
    data() {
      return {
        tableData3: [
          {
            id: 10001,
            key: 'app.label.name',
            content: '名称',
            language: 'zh_CN',
            aaa: 34,
            bbb: 56,
            ccc: 1,
          },
          {
            id: 10002,
            key: 'app.label.name',
            content: 'Name',
            language: 'en_US',
            aaa: 34,
            bbb: 56,
            ccc: 1,
          },
          {
            id: 10003,
            key: 'app.label.sex',
            content: '性别',
            language: 'zh_CN',
            aaa: 34,
            bbb: 56,
            ccc: 1,
          },
          {
            id: 10004,
            key: 'app.label.sex',
            content: 'Sex',
            language: 'en_US',
            aaa: 34,
            bbb: 56,
            ccc: 1,
          },
          {
            id: 10005,
            key: 'app.label.age',
            content: '年龄',
            language: 'zh_CN',
            aaa: 34,
            bbb: 56,
            ccc: 1,
          },
          {
            id: 10006,
            key: 'app.label.age',
            content: 'Age',
            language: 'en_US',
            aaa: 34,
            bbb: 56,
            ccc: 1,
          },
          {
            id: 10007,
            key: 'app.label.role',
            content: '角色',
            language: 'zh_CN',
            aaa: 34,
            bbb: 56,
            ccc: 1,
          },
          {
            id: 10008,
            key: 'app.label.role',
            content: 'Role',
            language: 'en_US',
            aaa: 34,
            bbb: 56,
            ccc: 2,
          },
          {
            id: 10009,
            key: 'app.label.address',
            content: '地址',
            language: 'zh_CN',
            aaa: 34,
            bbb: 56,
            ccc: 3,
          },
          {
            id: 10010,
            key: 'app.label.address',
            content: 'Address',
            language: 'en_US',
            aaa: 34,
            bbb: 56,
            ccc: 3,
          },
          {
            id: 10011,
            key: 'app.label.nickname',
            content: '昵称',
            language: 'zh_CN',
            aaa: 34,
            bbb: 56,
            ccc: 4,
          },
          {
            id: 10012,
            key: 'app.label.nickname',
            content: 'Nickname',
            language: 'en_US',
            aaa: 34,
            bbb: 56,
            ccc: 4,
          },
        ],
      }
    },
    props: {},
    components: {},
    watch: {},
    computed: {},
    methods: {
      // 通用行合并函数（将相同多列数据合并为一行）
      mergeRowMethod({ row, _rowIndex, column, visibleData }) {
        // 需要合并的列
        const fields = ['aaa', 'bbb']
        // .ccc 为关键字
        const cellValue = row.ccc
        if (cellValue && fields.includes(column.property)) {
          // 上一行
          const prevRow = visibleData[_rowIndex - 1]
          // 合并结尾行
          let nextRow = visibleData[_rowIndex + 1]
          // .ccc 为关键字
          if (prevRow && prevRow.ccc === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            let countRowspan = 1
            // .ccc 为关键字
            while (nextRow && nextRow.ccc === cellValue) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style scoped lang="scss"></style>

Expand Copy Copy