关于vue.js:vuetable选框问题及案例

39次阅读

共计 1422 个字符,预计需要花费 4 分钟才能阅读完成。

具体要实现的细节

  • 点击表头的复选项,会进行全选;再次点击,会勾销;
  • 每次须要把选中该行的 id 传过来
  • 切换分页的时候,须要有记忆性能:也就是翻页本来选中的不应该隐没。下方图片展现:(展现的是所有的选中的,切换分页的)

第一步增加对应的复选框


具体参照 element 官网示例

`<el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="listLoading" border  @cell-dblclick="celldblclick">` 

*   1

 `<el-table-column type="selection"></el-table-column>

  <el-table-column prop="id" label="编号"></el-table-column>

  <el-table-column prop="nameOne" label="名称 1"></el-table-column>

  <el-table-column prop="nameTwo" label="名称 2"></el-table-column>

</el-table>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9

第二步传 id 过来的话

这个是页面布局

`// 点击多选

    handleSelectionChange(val) {

      this.multipleSelection = val;

      this.batchPassArr = [] // 每次点击需清空本来数组的内容

      this.multipleSelection.map(item => { // 遍历数组,把 id 存进自定义的数组里

        this.batchPassArr.push(item.id)

      })

      this.batchPassArr = this.batchPassArr.join(',') 

    },` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17

第三步对于切换分页

在表头那里 <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="listLoading" border @cell-dblclick="celldblclick"></el-table> 加个:row-key="(row)=>{return row.id}"

 ` 也就是上面这个样子 ` 

*   1

`<el-table :data="tableData" ref="multipleTable" :row-key="(row)=>{return row.id}" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="listLoading" border  @cell-dblclick="celldblclick"></el-table>` 

*   1

在本人加的外面加个

`:reserve-selection="true"` 

*   1

也就是上面这个

`<el-table-column type="selection" :reserve-selection="true"></el-table-column>` 

*   1

正文完
 0