CustomColumn 自定义列

用于自定义表格列的显示、隐藏和排序的组件。支持拖拽排序、搜索筛选、固定列等功能。

基础用法

<template>
  <div>
    <!-- 表格组件 -->
    <by-table :columns="columns" :data="tableData" />

    <!-- 自定义列按钮 -->
    <el-button @click="showCustomColumn">自定义列</el-button>

    <!-- 自定义列组件 -->
    <custom-column
      :dialog-visible="customColumnVisible"
      :info-method="getColumnInfo"
      :submit-method="saveColumnConfig"
      :fixed-max-count="6"
      @close-dialog="customColumnVisible = false"
      @change-table="handleColumnChange"
      @change-table-group="handleColumnGroupChange"
    />
  </div>
</template>

<script>
import CustomColumn from '@/components/custom-column'

export default {
  components: {
    CustomColumn
  },
  data() {
    return {
      customColumnVisible: false,
      columns: [
        {
          label: '基础信息',
          data: [
            { label: 'ID', prop: 'id', key: 'id', width: 80, sort: 1, type: true },
            { label: '姓名', prop: 'name', key: 'name', width: 120, sort: 2, type: true },
            { label: '年龄', prop: 'age', key: 'age', width: 80, sort: 3, type: true }
          ]
        },
        {
          label: '详细信息',
          data: [
            { label: '邮箱', prop: 'email', key: 'email', width: 200, sort: 4, type: true },
            { label: '电话', prop: 'phone', key: 'phone', width: 150, sort: 5, type: true },
            { label: '地址', prop: 'address', key: 'address', width: 300, sort: 6, type: true }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    showCustomColumn() {
      this.customColumnVisible = true
      // 获取自定义列配置
      this.$refs.customColumn.getCustomTableList('/api/columns', this.columns)
    },

    // 获取列配置信息
    async getColumnInfo(params) {
      const response = await this.$http.get('/api/columns', { params })
      return response
    },

    // 保存列配置
    async saveColumnConfig(params) {
      const response = await this.$http.post('/api/columns', params)
      return response
    },

    // 列配置变更回调
    handleColumnChange(columns) {
      this.columns = columns
    },

    // 列分组配置变更回调
    handleColumnGroupChange(columnGroups) {
      console.log('列分组配置变更:', columnGroups)
    }
  }
}
</script>

API

Props

参数	说明	类型	默认值
dialogVisible	对话框显示状态	Boolean	false
infoMethod	获取列配置信息的方法	Function	-
submitMethod	保存列配置的方法	Function	-
fixedMaxCount	左侧固定列最大数量	Number	6

Events

事件名	说明	回调参数
close-dialog	关闭对话框时触发	-
change-table	列配置变更时触发	columns: 列配置数组
change-table-group	列分组配置变更时触发	columnGroups: 列分组配置数组

Methods

方法名	说明	参数
getCustomTableList	获取自定义表格列数据	(page: string, column: array)

功能特性

1. 列显示控制

• 支持勾选/取消勾选列显示
• 支持全不选功能
• 支持搜索筛选列

2. 拖拽排序

• 支持拖拽调整列顺序
• 支持固定列功能
• 自动处理固定列数量限制

3. 分组管理

• 按分组显示列
• 支持分组内搜索
• 保持原有分组结构

4. 配置持久化

• 支持保存列配置到后端
• 支持恢复默认配置
• 支持配置回显

数据结构

列配置格式

const columns = [
  {
    label: '分组名称',
    data: [
      {
        label: '列标题',
        prop: '字段名',
        key: '唯一标识',
        width: 列宽,
        sort: 排序号,
        type: 是否显示,
        fixed: 'left' // 固定列标识
      }
    ]
  }
]

保存配置格式

{
  id: '配置ID',
  page: '页面标识',
  column: [
    {
      label: '分组名称',
      data: [
        {
          label: '列标题',
          prop: '字段名',
          key: '唯一标识',
          width: 列宽,
          sort: 排序号,
          type: 是否显示,
          fixed: 'left'
        }
      ]
    }
  ]
}

注意事项

1. 固定列限制：当固定列数量超过 fixedMaxCount 时，固定功能将失效
2. 拖拽排序：拖拽时会自动处理固定列和普通列的排序
3. 搜索功能：支持按列标题搜索，支持分组内搜索
4. 配置回显：组件会自动处理已保存配置的回显
5. 数据克隆：组件内部会深度克隆数据，避免影响原始数据