vue+ElementUi 挑选框选中以后翻页举行状况坚持。及默许选中

2024年5月9日 224次阅读 来源: late

复选框

<el-table
:data="list"
ref="multipleTable"
:row-key="(row)=>{ return row.classId}"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column type="selection" :reserve-selection="true" ></el-table-column>
</el-table>

//切换分页耐久化选中表格

:row-key="(row)=>{ return row.classId}"
:reserve-selection="true"

//@selection-change 会返回一切选中的数据
//@select 会返回一切选中的数据及当前操纵的数据

清空一切选中

this.$refs.multipleTable.clearSelection();//页面中有搜刮或重置时可能会用到。

默许选中

this.$refs.multipleTable.toggleRowSelection(this.list[index]);//必需传表格的数据；以数组[下标]花样通报

单选框

<el-table
      :data="list"
      ref="multipleTable"
      :row-key="(row)=>{ return row.classId}"
      @current-change="handleCurrentRadio"
      style="width: 100%">
      <el-table-column width="80" v-if="radioShow">
        <template slot-scope="scope">
          <el-radio v-model="radio"  :label="scope.row.classId">{{''}}</el-radio>
        </template>
              </el-table-column>
    </el-table>

//@current-change="handleCurrentRadio"会返回选中的数据。能够在这个事宜用return false 来阻挠选中
//label 和原生的value属性一样。 应用v-model来绑定唯一值，意味着label的值为唯一的。
//{{“”}}为了让单选框不显现label。

    原文作者：late
    原文地址: https://segmentfault.com/a/1190000019263783
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞