vxe-table expand-config

vxe-table是一个基于Vue.js的表格组件库，提供了丰富的功能和配置选项。其中，expand-config是vxe-table中的一个扩展配置项，用于实现表格的展开和折叠功能。具体使用方法如下：

1. 在表格的columns中添加一个type为expand的列，用于显示展开和折叠按钮。

columns: [
  {
    type: 'expand',
    width: 50,
    // 自定义展开内容
    renderExpand: (h, params) => {
      return h('div', {
        style: {
          padding: '20px'
        }
      }, [
        h('p', '姓名：' + params.row.name),
        h('p', '年龄：' + params.row.age),
        h('p', '性别：' + params.row.sex)
      ])
    }
  },
  // 其他列配置
  // ...
]

2. 在表格的props中设置expand-config属性，用于配置展开和折叠的相关选项。

props: {
  // ...
  expandConfig: {
    trigger: 'click', // 触发方式，可选值为'click'和'dblclick'
    showIcon: true, // 是否显示展开和折叠图标
    iconOpen: 'vxe-icon--caret-bottom', // 展开图标
    iconClose: 'vxe-icon--caret-top' // 折叠图标
  }
}

3. 在表格的methods中添加一个toggleExpand方法，用于手动展开和折叠行。

methods: {
  toggleExpand (row, expanded) {
    this.$refs.table.toggleRowExpansion(row, expanded)
  }
}

4. 在表格的模板中使用v-slot来自定义展开内容。

<template>
  <vxe-table ref="table" :data="tableData" :columns="columns" :expand-config="expandConfig">
    <template v-slot:expand-content="{ row }">
      <div style="padding: 20px;">
        <p>姓名：{{ row.name }}</p>
        <p>年龄：{{ row.age }}</p>
        <p>性别：{{ row.sex }}</p>
      </div>
    </template>
  </vxe-table>
</template>