自定义插槽

当表格展示结果不符合需求时，可通过插槽解决。

一、表格自定义

1.valueFormet实现

valueFormat也会改变查看页。

暂无数据

<template>
  <c-table :option="option" @load="handleLoad"></c-table>
</template>
<script setup lang="ts">
import { h } from 'vue'

const option = {
  menuProps: {
    width: 220
  },
  columns: [
    {
      name: '姓名',
      prop: 'fullName'
    },
    {
      name: '性别',
      prop: 'gender',
      type: 'radio',
      dicData: ['男', '女'],
      formatValue: (record: any) => h('span', `性别：${record.gender}`)
    },
    {
      name: '年龄',
      prop: 'age',
      type: 'number'
    },
    {
      name: '生日',
      prop: 'birthday',
      type: 'date'
    }
  ]
}
const data = [
  {
    fullName: '张三',
    gender: '男',
    age: 28,
    birthday: '2000-11-19'
  }
]
const handleLoad = (params: any, done: Function) => {
  setTimeout(() => {
    done({
      total: data.length,
      records: data
    })
  }, 1000)
}
</script>

显示代码复制代码复制代码

2.插槽实现

暂无数据

<template>
  <c-table :option="option" @load="handleLoad">
    <!-- 通过record获取对象，column获取配置信息 -->
    <template #gender="{ record, column }">
      <a-tag color="blue">{{ column.prop + ':' + record.gender }}</a-tag>
    </template>
  </c-table>
</template>
<script setup lang="ts">
const option = {
  menuProps: {
    width: 220
  },
  columns: [
    {
      name: '姓名',
      prop: 'fullName'
    },
    {
      name: '性别',
      prop: 'gender',
      type: 'radio',
      dicData: ['男', '女']
    },
    {
      name: '年龄',
      prop: 'age',
      type: 'number'
    },
    {
      name: '生日',
      prop: 'birthday',
      type: 'date'
    }
  ]
}
const data = [
  {
    fullName: '张三',
    gender: '男',
    age: 28,
    birthday: '2000-11-19'
  }
]
const handleLoad = (params: any, done: Function) => {
  setTimeout(() => {
    done({
      total: data.length,
      records: data
    })
  }, 1000)
}
</script>

显示代码复制代码复制代码

二、表单插槽

暂无数据

<template>
  <c-table :option="option" @load="handleLoad" @edit="handleEdit">
    <!-- 通过record获取对象，column获取配置信息 -->
    <template #genderForm="{ record }">
      <c-select
        v-model="record.gender"
        :option="{
          dicData: ['男', '女', '未知', '自定义']
        }"
      />
    </template>
  </c-table>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue'

const option = {
  menuProps: {
    width: 220
  },
  columns: [
    {
      name: '姓名',
      prop: 'fullName'
    },
    {
      name: '性别',
      prop: 'gender',
      type: 'radio',
      dicData: ['男', '女']
    },
    {
      name: '年龄',
      prop: 'age',
      type: 'number'
    },
    {
      name: '生日',
      prop: 'birthday',
      type: 'date'
    }
  ]
}
const data = [
  {
    fullName: '张三',
    gender: '男',
    age: 28,
    birthday: '2000-11-19'
  }
]
const handleLoad = (params: any, done: Function) => {
  setTimeout(() => {
    done({
      total: data.length,
      records: data
    })
  }, 1000)
}

const handleEdit = (record: any, done: Function) => {
  Message.success(JSON.stringify(record))
  done()
}
</script>

显示代码复制代码复制代码