easy-ui展开行配置用法(两种)

第一种:用expand属性

<easy-custom-table
      rowKey="id"
      :expand="expand" //添加expand属性,属性值为一个对象
      :tableData="tableData"
      :columns="columns"
      :maxHeight="tableHeight"
      :headerCellStyle="{ background: '#e7ecf6' }"
></easy-custom-table>

在data中配置expand,expand属性的配置为render函数

expand: {
        render: (h, params) => {
          return (
            <easy-custom-table
              border={true}
              tableData={params.row.rawMaterialTraceChildren}
              columns={this.childTitles}
              headerCellStyle={{ background: '#f5f7fa' }}
            ></easy-custom-table>
          )
        }
 },

第二种:利用columns配置expand

<easy-custom-table
      rowKey="id"
      :tableData="tableData"
      :columns="columns" //在columns中配置展开行
      :maxHeight="tableHeight"
      @search="pageChange"
      :headerCellStyle="{ background: '#e7ecf6' }"
></easy-custom-table>
{
          label: '',
          type: 'expand',
          render: (h, params) => {
            return (
              <easy-custom-table
                border={true}
                tableData={params.row.rawMaterialTraceChildren}
                columns={this.childTitles}
                headerCellStyle={{ background: '#f5f7fa' }}
              ></easy-custom-table>
            )
          }
        },

添加一行type为expand,也用render函数渲染

posted on 2023-07-25 11:11  zy89898976  阅读(33)  评论(0编辑  收藏  举报