Vue.js 表格组件：自定义列配置详解

这段代码定义了一个名为 'columns' 的常量，它是一个数组，其中包含了多个对象，每个对象代表了一个表格列的配置信息。每个对象中包含了以下属性：

• title: 列标题；
• align: 列对齐方式；
• dataIndex: 列数据在数据源中对应的字段名；
• customRender: 自定义渲染函数，用于对该列的数据进行自定义渲染。

除了 'columns' 常量外，代码中还导入了其他模块，包括：

• BasicColumn: 一个接口，定义了表格列的基本属性；
• FormSchema: 一个接口，定义了表单项的基本属性；
• rules: 一个对象，包含了多个验证规则；
• render: 一个对象，包含了多个渲染函数。

代码示例：

import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { rules } from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';

//列表数据
export const columns: BasicColumn[] = [
   {
    title: '设备编号',
    align: 'center',
    dataIndex: 'deviceId'
   },
   {
    title: '品牌',
    align: 'center',
    dataIndex: 'brand'
   },
   {
    title: '售价',
    align: 'center',
    dataIndex: 'price'
   },
   {
    title: '状态',
    align: 'center',
    dataIndex: 'status',
    customRender: ({ text }) => {
      let color = text == 'open' ? 'green' : text == 'close' ? 'gray' : 'red';
      text = text == 'open' ? '开' : text == 'close' ? '关' : '异常';
      return render.renderTag(text, color);
     },
   },
   {
    title: '温度°C',
    align: 'center',
    dataIndex: 'temperature'
   },
   {
    title: '模式',
    align: 'center',
    dataIndex: 'model_dictText',
    customRender: ({ text }) => {
      let color = text == '制热' ? 'red' : text == '制冷' ? 'blue' : 'gray';
      return render.renderTag(text, color);
     },
   },
   {
    title: '风力',
    align: 'center',
    dataIndex: 'windForce_dictText'
   },
   {
    title: '瓦时',
    align: 'center',
    dataIndex: 'power'
   },
   {
    title: '定时关',
    align: 'center',
    dataIndex: 'timingOff'
   },
   {
    title: '定时开',
    align: 'center',
    dataIndex: 'timingOpen'
   },
];

代码解释：

• BasicColumn 接口定义了表格列的基本属性，例如 title、align 和 dataIndex。
• FormSchema 接口定义了表单项的基本属性，例如 title、type 和 required。
• rules 对象包含了多个验证规则，例如 required、email 和 max。
• render 对象包含了多个渲染函数，用于对数据进行自定义渲染。

示例中的代码：

• columns 数组包含了 10 个对象，每个对象代表一个表格列的配置信息。
• 每个对象都有 title、align 和 dataIndex 属性。
• 第 4 列和第 6 列还使用了 customRender 函数，用于对数据进行自定义渲染。

总结：

这段代码展示了如何使用 BasicColumn 接口自定义表格列配置。通过设置 title、align、dataIndex 和 customRender 属性，可以轻松实现表格列的个性化展示。FormSchema 接口、验证规则和渲染函数等相关概念也有助于提高表格组件的灵活性和易用性。