Skip to content
On this page

自定义行列 table


姓名
huyuchen
性别
年龄
29岁
身体状态
良好
显示代码
html
<HuLayoutTable :column="column" :tableData="tableData" :labelSpan="4" borderColor="red" rowHeight="36px" />

<script setup>
  import { reactive, toRefs, h } from 'vue'
  import 'element-plus/dist/index.css'
  const tableData = {
    name: 'huyuchen',
    sex: 1,
    age: 29,
    status: 1,
  }
  const statusEnums = {
    0: '一般',
    1: '良好',
    2: '',
  }
  const data = reactive({
    column: [
      { label: '姓名', prop: 'name', span: 24 },
      {
        label: '性别',
        prop: 'sex',
        render({ row }) {
          return h(NAvatar, {
            style: {
              color: 'yellow',
              backgroundColor: 'red',
              display: 'flex',
              alignItems: 'center',
            },
            innerHTML: ['', ''][tableData[row.prop]],
          })
        },
        span: 12,
      },
      {
        label: '年龄',
        prop: 'age',
        render({ row }) {
          return h('div', { innerHTML: tableData[row.prop] + '' })
        },
        span: 12,
      },
      {
        label: '身体状态',
        prop: 'status',
        render({ row }) {
          return h('div', { innerHTML: statusEnums[tableData[row.prop]] })
        },
      },
    ],
  })

  const { column } = toRefs(data)
</script>

Attributes

参数说明类型默认值
column列规则Object{}
tableData显示的数据Array[]
labelSpanlabel 的宽度Number2
borderColor边框颜色color#527ca7
rowHeight行高string30px

Column Attributes

参数说明类型默认值
labellabelstring-
prop对应列规则字段名string-
render自定义渲染函数h(type,props,children):VNode-

Released under the MIT License.