美文网首页
vue 列表嵌套表格 子表格进行分页和多选

vue 列表嵌套表格 子表格进行分页和多选

作者: 馨予务心竞 | 来源:发表于2023-04-05 10:08 被阅读0次

    <div class="aaa" v-for="(item, index) in listData" :key="index">

    <div class="ccc">

              <a-table :row-selection="{ selectedRowKeys: item.selectedRowKeys, onChange: onSelectChange }" :columns="columns"

                :data-source="item.tableData" :pagination="item.pagination" @change="handleTableChange"

                :scroll="{ x: 0, y: 200 }" :rowKey="

                  (row, tindex) => {

                    return row.id + ',' + index

                  }">

                <template slot="operation" slot-scope="text, record">

                </template>

              </a-table>

            </div>

          </div>

     data() {

        return {

          listData: [

            {

              tableData: [{ id: '1.1' }, { id: '1.2' }, { id: '1.3' }, { id: '1.4' }, { id: '1.5' }],

              selectedRowKeys: [],

              pagination: {

                pIndex: 0,

                current: 1,

                pageSize: 2,

                pageSizeOptions: ['10', '20', '30'],

                showQuickJumper: false,

                showSizeChanger: false,

                total: 0,

                showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据

              },

            },

            {

            tableData: [{ id: '2.1' }, { id: '2.2' }, { id: '2.3' }, { id: '2.4' }, { id: '2.5' }],

              selectedRowKeys: [],

              pagination: {

                pIndex: 1,

                current: 1,

                pageSize: 2,

                pageSizeOptions: ['10', '20', '30'],

                showQuickJumper: false,

                showSizeChanger: false,

                total: 0,

                showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据

              },

            },

            {

            tableData: [{ id: '3.1' }, { id: '3.2' }, { id: '3.3' }, { id: '3.4' }, { id: '3.5' }],

              selectedRowKeys: [],

              pagination: {

                pIndex: 2,

                current: 1,

                pageSize: 2,

                pageSizeOptions: ['10', '20', '30'],

                showQuickJumper: false,

                showSizeChanger: false,

                total: 0,

                showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据

              },

            }

          ],

          tableData: [], //表格数据

          columns: [

            {

              align: 'left',

              dataIndex: '',

              title: '编号',

            },

            {

              align: 'left',

              dataIndex: ''zd1',

              title: '字段1',

            },

            {

              align: 'left',

              dataIndex: ''zd2',

              title: '字段2',

            },

            {

              align: 'left',

              dataIndex: ''zd3',

              title: '字段3',

            },

            {

              align: 'left',

              dataIndex: ''zd4',

              title: '字段4',

            },

            {

              align: 'left',

              dataIndex: 'zd5',

              title: '字段5',

            },

            {

              align: 'center',

              title: '操作',

              width: 120,

              dataIndex: 'operation',

              scopedSlots: { customRender: 'operation' },

            },

          ],

        }

      },

      methods: {

      //分页

        handleTableChange(pagination, filters, sorter) {

          console.log('handleTableChange:' + pagination.pIndex);

          this.listData[pagination.pIndex].pagination.current = pagination.current

        },

        //勾选

        onSelectChange(selectedRowKeys) {

          let keyData = selectedRowKeys[0].split(',')

          let dataIndex = Number(keyData[1])

          this.listData[dataIndex].selectedRowKeys = selectedRowKeys

        },

    }

    相关文章

      网友评论

          本文标题:vue 列表嵌套表格 子表格进行分页和多选

          本文链接:https://www.haomeiwen.com/subject/bhyeddtx.html