Vue 中使用 Table 组件自定义表格列渲染 - 代码解析

这段代码定义了一个名为'columns'的常量，它是一个数组，其中包含了表格的列信息。每个列信息都是一个对象，包含了该列的标题（title）、对齐方式（align）、数据索引（dataIndex）等属性。其中，customRender属性指定了该列的自定义渲染函数，用于将数据进行特定的格式化展示。最后，该常量被导出供其他模块使用。

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 类型定义表格列信息。customRender 属性允许自定义列渲染逻辑，例如将状态值 'open'、'close'、'异常'分别渲染为绿色、灰色、红色标签，并根据模式值渲染不同颜色标签。