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

qq_27299165

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

阅读量619

点赞数 8

CC 4.0 BY-SA版权

文章标签： 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 =