elementUi - - - - table 勾选功能 & 禁止勾选

elementUi - - - - table 勾选功能 & 禁止勾选

1. table 勾选功能

代码如下:

<el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange"  >
          <el-table-column type="selection" width="55"></el-table-column>
</el-table>

...
    // 勾选
    handleSelectionChange(val) {
      // 这里是勾选回调
      this.multipleSelection = val;
    },

上述代码即可实现勾选功能

2. table 禁止勾选

代码如下:

<el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange" :selectable="checkboxT" disabled="true" >
          <el-table-column type="selection" width="55"></el-table-column>
</el-table>

...
    // 勾选
    handleSelectionChange(val) {
      // 这里是勾选回调
      this.multipleSelection = val;
   },
   // 禁止勾选
   checkboxT(row, index) {
      return row.can_edit;
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!要在 Element UI 表格中实现跨分页勾选,您可以按照以下步骤进行操作: 1. 首先,在表格的数据源中添加一个属性用于记录选中状态,例如 `isSelected`。 2. 在表格的列定义中添加一个自定义列,用于显示勾选框,并绑定到 `isSelected` 属性。 3. 在表格组件中添加一个 `selection-change` 事件监听器,以便在选中状态改变时更新数据源中的 `isSelected` 属性。 4. 在分页组件中添加一个 `current-change` 事件监听器,以便在切换分页时重新计算选中状态。 5. 在表格组件中添加一个全局的勾选框,用于实现全选功能。 下面是一个示例的代码片段,演示了如何实现跨分页勾选: ```html <template> <div> <el-table :data="tableData" @selection-change="handleSelectionChange" > <el-table-column type="selection" :selectable="selectable" width="55"> <template slot-scope="{row}"> <el-checkbox v-model="row.isSelected"></el-checkbox> </template> </el-table-column> <!-- 其他列定义 --> </el-table> <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="total" ></el-pagination> </div> </template> <script> export default { data() { return { tableData: [], currentPage: 1, pageSize: 10, total: 0 }; }, methods: { handleSelectionChange(selection) { // 更新数据源中的 isSelected 属性 this.tableData.forEach(row => { row.isSelected = selection.includes(row); }); }, handlePageChange(page) { // 切换分页时重新计算选中状态 this.currentPage = page; this.loadData(); }, loadData() { // 根据当前分页参数加载数据 // 注意根据实际情况进行分页请求和数据更新 }, selectable(row) { // 控制是否允许选择 return row.isSelected || !this.isAllSelected; } }, computed: { isAllSelected() { // 判断是否全选 return this.tableData.every(row => row.isSelected); } }, mounted() { this.loadData(); } }; </script> ``` 请注意,以上代码仅为示例,您需要根据您的实际需求进行适当的修改和调整。 希望这能帮到您!如果您有任何其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值