【element plus】虚拟dom表格中cellRenderer如何使用v-for循环渲染item

在Element Plus中，cellRenderer 通常用于自定义表格（el-table）中单元格的渲染方式。然而，cellRenderer 本身并不直接支持 Vue 的 v-for 指令，因为 cellRenderer 是一个函数，它接收单元格的数据和其他上下文信息，并返回一个 VNode（虚拟节点）或字符串来渲染单元格。

目标效果：

本案例中，设备信息deviceInfos是一个数组，需要循环渲染每个设备。

要在 cellRenderer 中实现类似 v-for 的效果，需要使用 JavaScript 的数组方法来迭代数据，并在迭代过程中生成相应的 VNode（如果你使用的是 JSX）或字符串（如果你使用的是模板字符串或普通的 HTML 字符串）。

错误写法：

javascript 复制代码

cellRenderer: ({ cellData: deviceInfos }) => {
      deviceInfos.forEach((item) => {
        const deviceObj = deviceTypes.filter(e => e.value === item.deviceType)
        item.name = deviceObj?.name
      });
      return (
        <>
          <ElTag v-for="(item, index) in deviceInfos" key={item.deviceId}>{item.name}</ElTag>
        </>
      )
    }

报错：ReferenceError: item is not defined

正确写法：使用 JavaScript 的数组方法来迭代数据，并在迭代过程中生成相应的 VNode

javascript 复制代码

cellRenderer({ cellData }) {
      return (
        <div>
          {cellData.map(item => {
            const device = deviceTypes.find(d => d.value === item.deviceType);
            console.log('device ', device)
            return device ? (
              <el-tag key={item.deviceId}>
                {device.label}
              </el-tag>
            ) : null;
          })}
        </div>
      );
    }

在这个示例中，cellRenderer 方法接收一个对象作为参数，该对象包含 cellData（当前单元格的数据）。然后，它使用 map 方法来迭代 cellData 数组，并为每个元素生成一个 el-tag 组件。注意，这里使用了 JSX 语法。

columns全部代码：

javascript 复制代码

// table列数据
const columns = ref([
  {
    key: 'index', dataKey: 'index', title: t('setting.index'), width: 60,
    cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`,
  },
  { key: 'no', dataKey: 'no', title: t('setting.key') },
  { key: 'name', dataKey: 'name', title: t('setting.name') },
  { key: 'mapNo', dataKey: 'mapNo', title: t('setting.map'), width: 150 },
  {
    key: 'status',
    dataKey: 'status',
    title: t('setting.status'),
    cellRenderer: (row) => {
      return (
        <>
          <el-switch v-model={row.rowData.status} active-value={0} inactive-value={1} onClick={() => handleStatusChange(row)} />
        </>
      )
    },
  },
  { key: 'businessType', dataKey: 'businessType', title: t('setting.businessType'),
    cellRenderer: ({ cellData: businessType}) => {
      const text = businessTypes.filter(item => item.value === businessType);
      return (
        {text}
      )
    }
   },
  { key: 'deviceId', dataKey: 'deviceId', title: t('setting.robotId') },
  { key: 'username', dataKey: 'username', title: t('setting.loginPerson') },
  {
    key: 'workStatus', dataKey: 'workStatus', title: t('setting.loginStatus'),
    cellRenderer: ({ cellData: workStatus }) => {
      const type = workStatus === 0 ? 'success' : 'warning';
      return (
        <ElTag type={type}>{workStatus === 0 ? t('setting.work') : t('setting.away')}</ElTag>
      )
    }
  },
  {
    key: 'deviceInfos', dataKey: 'deviceInfos', title: t('setting.deviceInfo'),
     cellRenderer({ cellData }) {
      return (
        <div>
          {cellData.map(item => {
            const device = deviceTypes.find(d => d.value === item.deviceType);
            console.log('device ', device)
            return device ? (
              <el-tag key={item.deviceId}>
                {device.label}
              </el-tag>
            ) : null;
          })}
        </div>
      );
    },
  },
  { key: 'remark', dataKey: 'remark', title: t('common.remark') },
  { key: 'updateTime', dataKey: 'updateTime', title: t('setting.modifiedTime') },
  { key: 'updateBy', dataKey: 'updateBy', title: t('setting.modifiedBy') },
  {
    key: 'operate', dataKey: 'operate', title: t('common.operate'),fixed: 'right',width: 50,
    cellRenderer: (row) => {
      return (
        <>
          <ElButton link type="primary" onClick={() => handleUpdate(row)} icon="Edit"></ElButton>
        </>
      )
    },
  },
])