表单中的扩展行

扩展表单

1. 表单中的扩展行（type: 'expand'），它允许用户点击以展开更多内容。
2. 这个扩展行使用一个渲染函数 (render) 来显示额外的信息。
3. 其他对象定义了常规列，如时间和类型等，通过指定 title（显示在表头的文字）和 key（与数据对象中的键对应）。
4. 当这个组件渲染时，它将显示一个表格。表格的列由 columns 数组定义，而行数据则由 data 数组提供。第一列是一个特殊的展开列，允许用户查看更多关于该行的信息（在这个示例中，是额外显示tableData数据的data属性）。

export default {
  data () {
    return {
      columnsList: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h('div', [params.row.data])
          }
        },
        {
          title: '时间',
          align: 'center',
          minWidth: 200,
          key: 'time',
          // 可对此表单元素进行排序
          sortable: true
        },
        {
          title: '类型',
          align: 'center',
          key: 'type',
          minWidth: 200
        }
      ],
      // 初始化一个空数组用于存放 VIN 数据
      vinList: [],
      tableData: [
        // 假数据
        {
          time: '2023-12-25 14:00:00',
          type: '实时数据',
          data: '232302fe466f78636f1'
        },
        {
          time: '2023-12-25 14:00:01',
          type: '实时数据',
          data: '242302fe466f78636f6e'
        },
        ...
      ],
      ...
    }
  },
  ...
}