vue3+ts+IviewUI 可展开表格render写法

qq_27299165

已于 2024-01-04 15:05:28 修改

阅读量546

点赞数 8

文章标签： javascript 前端 vue.js

于 2024-01-04 14:58:39 首次发布

本文链接：https://blog.csdn.net/qq_27299165/article/details/135387088

版权


{

  type: 'expand',
  width: 50,
  render: (h: any, params: any) => h(
   ShareEquipExpand,
   { data: params.row.point_list } // 直接向子组件ShareEquipExpand传递数据，不用使用props进行传递（这是我踩过的坑~）
  )
},

注意：on-expand事件如下：

<Table class="table" size="small" stripe  :columns="columns" :data="data" @on-expand="onExpandRow">

子组件代码如下：

<template>
  <div class="expand-table">
    <Table stripe size="small" border :columns="columns" :data="data">
      <template #point_type="{ row }">
        <span>
          {{ row.point_type }}：
          <b v-color="'#19be6b'">{{ row.value || '-' }}</b>
        </span>
      </template>
    </Table>
  </div>
</template>
<script lang="ts" setup>
type stringKey = Record<string, any>;
const props = defineProps({ data: Array })
const columns = [
  {
    type: 'index',
    width: 90,
    align: 'center'
  },
  {
    title: '数据点编号',
    key: 'point',
    width: 160,
    align: 'center'
  },
  {
    title: '信息点',
    slot: 'point_type',
    align: 'left'
  }
]
const data: stringKey[] = reactive([])
watch(() => props.data, (newVal: any) => {
  data.length = 0
  if (newVal && newVal.length > 0 ) {
    newVal.map((val: any) => {
      data.push(val)
    })
  }
}, { immediate: true, deep: true })

父组件可展开表格

// 表头

const columns = [

 {

  type: 'index',

  title: '#',

  width: 60,

  align: 'center'

 },

 {

  type: 'expand',

  width: 50,

  render: (h: any, params: any) => h(FloorExpand, {

   row: params.row, 

   // 这里跟子组件emits事件对应的实事件名前面需要加上 on

   onEdit: (obj: stringKey, type: string) => {

     ……

   },

  })

 }

]

// FloorExpand.vue

const emits = defineEmits<{

 // 事件名字、接收值、没有返回值

 (event: 'edit', obj: stringKey, type: string): void

 (event: 'confirmRemove', obj: stringKey, type: string): void

 (event: 'cancelHandle', iobj: stringKey, type: string): void

 (event: 'lookDetails', obj: stringKey, type: string): void

}>()

const handleEdit = (obj: stringKey, type: string) => {

 emits('edit', obj, type)

}

const handleConfirmRemove = (obj: stringKey, type: string) => {

 emits('confirmRemove', obj, type)

}