elementUi表格多选指定多选行数_elementui 描述列表自由调节每行数量

最近的项目都跟table打交道，各种表格，用奇葩来形容也不为过，这里介绍两种elementui表格每次只允许选中一项的实现方法。话不多说，先看代码再作解释。

使用selection-change 实现方法

html代码

// 使用@selection-change
<el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange">
	 <el-table-column type="selection" ></el-table-column>
</el-table>
1
2
3
4

js

data() {
	return {
		tableData:[],
		multipleSelection:[]
	}
} 
...
methods: {
	handleSelectionChange(rows){
      if(rows.length > 1){  //单选时为1，需要选择n项改数值为n就可以     
        this.$refs.multipleTable.toggleRowSelection(rows[0],false);//超出指定选择个数后，把第一个选中的selection设为false
        rows.splice(0,1);//同时要把选中第一项移除
      }
      this.multipleSelection= rows;
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用el-checkbox实现方法

html代码

// 使用插槽
<el-table :data="tableData">
	<el-table-column prop="_select" label="选中标记" min-width="80" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row._select" @change="selectChange(scope.$index)"></el-checkbox>
            </template>
          </el-table-column>
</el-table>
1
2
3
4
5
6
7
8

js

data() {
	return {
		tableData:[]
	}
} 
...
methods: {
	selectChange(index) {
	    for (let i = 0; i < this.tableData.length; i++) {
	    	this.tableData[i]._select= false;//先把所有的选项selection设为false
	    }
	    this.tableData[index]._select= true;//把选中的该项selection设为true
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

小小总结一下：
1、使用selection-change 实现方法可以自由设置选择行数，可以取到选中行数的data，但是不能直接取到选中行数的index，还有是只做单选时，点击全选会选择最后的一项（多选没试过！）。
2、使用插槽的方法可以取到选中行的data和index，目前只写了单选，多选的还没有去实现，因为项目不需要没有再去试验了。
本人是走在路上的菜鸟一枚，希望哪个小伙伴有更骚包的操作分享出来，供大家学习一哈。