el-table跨页添加序列号

<!-- table表格 -->

<el-table>

    ......

    <el-table-column label="序号" width="80" align="center">

       <template slot-scope="scope">

           <span v-text="Index(scope.$index)"></span>

       </template>

  </el-table-column>

</el-table>

......

methods: {

    // 表格序号

    Index(index) {

        return (this.search.pageNum - 1) * this.search.pageSize + index +1;

    }
}

el-tableElement UI 提供的表格组件,跨页全选指的是在表格分页情况下,实现全选功能。 要实现 el-table跨页全选,可以按照以下步骤进行操作: 1. 设置表格的 selection 属性为 true,开启选择模式: ```vue <el-table :data="tableData" :selection="true"> <!-- 表格列配置 --> </el-table> ``` 2. 定义一个变量 selectedRows 来保存选中的行数据: ```vue data() { return { tableData: [], // 表格数据源 selectedRows: [] // 选中的行数据 }; } ``` 3. 监听表格的 selection-change 事件,将选中/取消选中的行数据保存到 selectedRows 变量中: ```vue <el-table :data="tableData" :selection="true" @selection-change="handleSelectionChange"> <!-- 表格列配置 --> </el-table> methods: { handleSelectionChange(val) { this.selectedRows = val; } } ``` 4. 在表格的底部插槽中添加全选按钮,并绑定全选/取消全选的方法: ```vue <template slot="footer"> <el-checkbox v-model="isAllSelected" @change="handleSelectAll"></el-checkbox> </template> data() { return { tableData: [], // 表格数据源 selectedRows: [], // 选中的行数据 isAllSelected: false // 是否全选 }; }, methods: { handleSelectAll() { if (this.isAllSelected) { this.selectedRows = [...this.tableData]; } else { this.selectedRows = []; } } } ``` 5. 判断当前页的所有行是否都被选中,更新全选按钮的状态: ```vue <template slot="footer"> <el-checkbox v-model="isAllSelected" @change="handleSelectAll"></el-checkbox> </template> methods: { handleSelectAll() { if (this.isAllSelected) { this.selectedRows = [...this.tableData]; } else { this.selectedRows = []; } }, // 监听表格数据的变化 tableDataChange(newData) { if (newData.length === 0) { this.isAllSelected = false; } else { this.isAllSelected = this.selectedRows.length === newData.length; } } }, watch: { tableData: { handler: 'tableDataChange', immediate: true } } ``` 通过以上步骤,你可以在 el-table 中实现跨页全选功能。当表格分页时,选中某一页的行数据后,可以点击全选按钮将当前页及其他已选中的页的行数据全部选中,取消全选则取消所有已选中的行数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值