在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></>)},},
])