ElementUI 表格合并表头并控制列显示

在 ElementUI 中，合并表头和控制特定列的显示可以通过以下方式实现：

合并表头

使用 el-table 的 header-cell-style 和 span-method 属性可以实现表头合并：

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="180">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          width="300">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    }
  }
}
</script>

控制特定列的显示

可以通过 v-if 或动态绑定 columns 来控制列的显示：

方法1：使用 v-if

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      v-if="showNameColumn"
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      showNameColumn: true
    }
  }
}
</script>

方法2：动态生成 columns

<template>
  <el-table :data="tableData" :columns="dynamicColumns">
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      allColumns: [
        { prop: 'date', label: '日期', width: '180' },
        { prop: 'name', label: '姓名', width: '180' },
        { prop: 'address', label: '地址' }
      ],
      visibleColumns: ['date', 'name', 'address']
    }
  },
  computed: {
    dynamicColumns() {
      return this.allColumns.filter(column => 
        this.visibleColumns.includes(column.prop)
      )
    }
  }
}
</script>

结合合并表头和控制列显示

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    border
    style="width: 100%">
    <el-table-column
      v-for="column in dynamicColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width">
    </el-table-column>
  </el-table>

  <div>
    <el-checkbox v-model="showNameColumn">显示姓名列</el-checkbox>
    <el-checkbox v-model="showAddressColumn">显示地址列</el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      showNameColumn: true,
      showAddressColumn: true,
      allColumns: [
        { prop: 'date', label: '日期', width: '180' },
        { prop: 'name', label: '姓名', width: '180' },
        { prop: 'address', label: '地址', width: '300' }
      ]
    }
  },
  computed: {
    dynamicColumns() {
      return this.allColumns.filter(column => {
        if (column.prop === 'name') return this.showNameColumn
        if (column.prop === 'address') return this.showAddressColumn
        return true
      })
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并逻辑
    }
  }
}
</script>

以上方法可以帮助你灵活地控制 ElementUI 表格的表头合并和列显示。