import { h } from 'vue'; import { NTag, NAvatar, NImage } from 'naive-ui'; /** * 表格列配置 * 定义表格显示的列 */ export const columns = [ { type: 'selection', // 多选框列 width: 50, fixed: 'left', }, { title: 'ID', key: 'id', fixed: 'left', width: 50, }, {% for field in list_fields %} { title: '{{ field.label }}', key: '{{ field.camel_name }}', width: {% if field.type == 'CharField' %}150{% elif field.type == 'IntegerField' %}100{% elif field.type == 'DateTimeField' %}180{% else %}120{% endif %}, {% if field.is_image %} // 图片渲染 render(record) { return record.{{ field.camel_name }} ? h(NAvatar, { src: record.{{ field.camel_name }}, size: 48, shape: 'square', fit: 'cover', style: { borderRadius: '4px', }, }) : h('span', '-'); }, {% elif field.choices %} // 选项标签渲染 render(record) { const statusMap = { {% for choice in field.choices %} {{ choice.value }}: { text: '{{ choice.label }}', type: {% if choice.value == 1 %}'success'{% elif choice.value == 2 %}'error'{% elif choice.value == 3 %}'warning'{% else %}'info'{% endif %} }, {% endfor %} }; const status = statusMap[record.{{ field.camel_name }}]; return h( NTag, { bordered: false, type: status?.type || 'info', }, { default: () => status?.text || record.{{ field.camel_name }}, }, ); }, {% elif field.camel_name == 'status' %} // 状态标签渲染 render(record) { return h( NTag, { bordered: false, type: record.status == 1 ? 'success' : 'error', }, { default: () => (record.status == 1 ? '正常' : '停用'), }, ); }, {% elif field.type == 'CharField' and field.camel_name|lower in ['website', 'site', 'url', 'link'] %} // 链接渲染 render(record) { const url = record.{{ field.camel_name }}; return h( 'a', { href: url, target: '_blank', rel: 'noopener noreferrer', }, { default: () => url || '点击查看', }, ); }, {% else %} // 普通文本渲染(无需额外配置) ellipsis: { tooltip: true, }, {% endif %} }, {% endfor %} { title: '创建人', key: 'createUser', width: 100, }, { title: '创建时间', key: 'createTime', width: 180, }, ];