Arco Design 表格展开行的内容 —— Arco Design在vue3中的应用

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

之前在vue项目中用element UI组件比较多点，最近换了个UI框架 Arco Design。是字节跳动推出的，可用于React 和Vue，这里是官网： arco.design/。

在vue3中用UI框架 Arco Design的时候遇到一个小问题，就是表格组件有个展开行的功能，其实这个也不难，按照官网文档的说法，只要在这里判断就行，然后返回展开行里要展示的内容：

核心代码：

<a-table :columns="columns" :data="data" :expandable="expandable" />

const expandable = reactive({
      title: 'Expand',
      width: 80,
      expandedRowRender: (record) => {
        if(record.key==='3'){
          return `My Name is ${record.name}`
        }
      }
    });

但是这个麻烦就麻烦在：一般正常需求在展开行中展示的可能不只是字符串那么简单，大多数还要有元素或者子组件。 而在arco design的表格组件里直接在 `` 中写类似 jsx的代码是不识别的，会当成字符串展示，这就尴尬了。

来看API中的说明：

TableExpandable 自定义展开行内容，类型是 (record: TableData) => VNodeChild

正常组件一般都是内置好的可以直接在 `` 中写html元素类似 jsx，这里是 VNodeChild，所以需要自己用vue的 h 函数来写类似这种：

 // 展开行的设置 ---  一级表格
  const expandable = reactive({
    title: '',
    width: 40,
    defaultExpandAllRows: true,
    expandedRowRender: (record: any) => {
      if (record.params2 && record.params2.length > 0) {
        return h('div', {}, [
          h(SecondLevelTable, { ':params-data': record.params2 }),
          // h(SecondLevelTable, { props: { paramsData: record.params2 } }),
        ]);
      }
      return '';
    },
  });

提示：别忘了引入 h 函数

import { h } from 'vue';

h 函数可以写普通的html元素也可以写引入的子组件，给子组件通过props传值和监听事件的写法是：

 const expandable = reactive({
    title: '',
    width: 40,
    defaultExpandedRowKeys: [],
    defaultExpandAllRows: false,
    expandedRowRender: (record: any) => {
      if (record.array && record.array.length > 0) {
        return h(EditThirdLevel, {
          paramsData3: record.array,
          onPostToSecond(params) {
            // 这里是拿到子组件传来的值  params
            console.log(params);
          },
        });
      }
      return '';
    },
  });

这里是子组件：

重要提示： h 函数中父子组件通过emit触发事件时，子组件我用的是驼峰命名 postToSecond，但是父组件不是直接写的 postToSecond 而是 onPostToSecond

提示： 别忘了引入组件

import SecondLevelTable from './SecondLevelTable.vue';

这套组件整体跟element UI 差不多，但就是觉得这里还要自己用h函数来写，用起来有点麻烦。

写一下，因为这个框架的博客还不算多，希望能帮到遇到同样问题的童鞋，也算是自己的一个记录。