elementPlus 配置columns

在Element Plus的表格组件（el-table）中，配置columns是非常关键的一步，它定义了表格展示的每列结构，包括列名、数据显示、列宽、是否可排序、默认排序等。下面是一个基本的columns配置示例：

export default {
  data() {
    return {
      columns: [
        {
          // 列标题
          label: '姓名',
          // 字段名，对应tableData中的数据字段
          prop: 'name',
          // 是否显示该列，默认true
          show: true,
          // 数据类型可以是字符串、数字、数组等
          type: 'string',
          // 设置列宽度，单位是px或百分比
          width: '180px',
          // 是否可以排序，如果是数组则按指定顺序排序
          sortable: true,
          // 排序选项，如['asc', 'desc']
          sortOrders: ['asc'],
        },
        {
          label: '年龄',
          prop: 'age',
          type: 'number',
          width: '120px',
          sortable: true,
        },
        {
          label: '操作',
          // 属于特殊列，内容由vue实例处理
          render: (h, params) => h('div', { style: 'text-align: center' }, [
            h('button', { on: { click: () => doSomething(params.row) } }, '编辑'),
            h('button', { on: { click: () => confirmDelete(params.row) } }, '删除'),
          ]),
          fixed: 'right', // 右固定列
          width: '150px',
          // 如果不需要显示，show可以设置为false
          show: false,
        },
      ],
    };
  },
  // 其他methods...
};

每个column对象可以包含上述部分或全部属性，例如`label`用于显示列标题，`prop`定义与数据绑定的字段，`sortable`决定是否允许排序，`width`设置列的宽度，`render`则是自定义列内容。