vue ant table 嵌套

  <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        @expand="expand">

       <span slot="serial" slot-scope="text,record,index">
           {{(ipagination.current-1)*ipagination.pageSize+index+1}}
        </span>
        <a-table
          slot="expandedRowRender"
          slot-scope="record, index, indent, expanded"
          :columns="innerColumns"
          :data-source="record.hourseList"
          :pagination="false"
          rowKey="id"
          size="middle"
          class="j-table-force-nowrap"
          bordered
        >
        </a-table>
      </a-table>

只获取一次数据,子表数据是主表数据中的一个数组,可以直接用来设置为子表的数据源
注意点是 slot-scope=“record, index, indent, expanded”

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现Ant Design Vue表格(Table)的多个多选功能组件,你可以使用Ant Design VueTable组件的row-selection属性。这个属性可以将表格的每一行都变成一个可选中的复选框。如果需要多个多选功能组件,你可以将多个Table组件嵌套在一个父组件中,并在每个Table组件中使用不同的row-selection属性来实现不同的多选功能。 以下是一个简单的示例代码: ``` <template> <div> <a-table :columns="columns1" :data-source="data" :row-selection="rowSelection1"></a-table> <a-table :columns="columns2" :data-source="data" :row-selection="rowSelection2"></a-table> </div> </template> <script> export default { data() { return { data: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' } ], rowSelection1: { type: 'checkbox', onChange: (selectedRowKeys, selectedRows) => { console.log(selectedRowKeys, selectedRows); } }, rowSelection2: { type: 'radio', onChange: (selectedRowKeys, selectedRows) => { console.log(selectedRowKeys, selectedRows); } }, columns1: [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' } ], columns2: [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' } ] }; } }; </script> ``` 在这个示例中,我们创建了两个Table组件,并分别定义了不同的row-selection属性。第一个Table组件使用复选框,第二个Table组件使用单选框。当用户选择行时,我们使用onChange事件来打印所选行的键和值。 你可以根据自己的需求修改代码来实现不同的多选功能组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值