element-ui table组件属性:reserve-selection分页保留勾选项

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
    :row-key="getRowKeys"
  >
    <el-table-column
      type="selection"
      width="55"
      :reserve-selection="true"
    />
    <!-- 其他列的定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      multipleSelection: [], // 选中的数据
    };
  },
  methods: {
    // 获取行的唯一标识
    getRowKeys(row) {
      return row.id; // 假设每行数据都有一个唯一的 id 属性
    },
    // 选中状态改变时的回调
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

非常感谢您的提问!以下是封装 Element UI Table 组件并带有分页功能的代码: ``` <template> <div> <el-table :data="tableData" :columns="columns" :height="height" :stripe="stripe" :border="border" :show-header="showHeader" :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName"> <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :render-header="column.renderHeader" :sortable="column.sortable" :sort-method="column.sortMethod" :resizable="column.resizable" :formatter="column.formatter" :show-overflow-tooltip="column.showOverflowTooltip" :align="column.align" :header-align="column.headerAlign" :class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable" :reserve-selection="column.reserveSelection" :filters="column.filters" :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple" :filter-method="column.filterMethod" :filtered-value="column.filteredValue"> </el-table-column> </el-table> <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" :page-sizes="pageSizes" :layout="layout" :prev-text="prevText" :next-text="nextText" :disabled="disabled" :hide-on-single-page="hideOnSinglePage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination> </div> </template> <script> export default { name: 'MyTable', props: { tableData: { type: Array, required: true }, columns: { type: Array, required: true }, height: { type: [Number, String], default: '' }, stripe: { type: Boolean, default: true }, border: { type: Boolean, default: true }, showHeader: { type: Boolean, default: true }, highlightCurrentRow: { type: Boolean, default: false }, rowClassName: { type: Function, default: () => '' }, currentPage: { type: Number, default: 1 }, pageSize: { type: Number, default: 10 }, total: { type: Number, default: 0 }, pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50, 100] }, layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' }, prevText: { type: String, default: '上一页' }, nextText: { type: String, default: '下一页' }, disabled: { type: Boolean, default: false }, hideOnSinglePage: { type: Boolean, default: false } }, methods: { handleSizeChange(val) { this.$emit('size-change', val) }, handleCurrentChange(val) { this.$emit('current-change', val) } } } </script> ``` 希望这个代码对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值