elementUI-table使用(带复选框)

• 渲染数据

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">el-table-column>
    <el-table-column prop="name" label="姓名" width="180">el-table-column>
    <el-table-column prop="address" label="地址">
    	<template slot-scope="scope">
        	{{scope.row.address，scope.$index, scope.row，scope.column}}
      	template>
    el-table-column>
el-table>

tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
}]

• checkbox

<el-table :data="tableData" style="width: 100%" ref="table" @select="checkSelect">
	<el-table-column type="selection" width="55">el-table-column>
	
    <el-table-column prop="date" label="日期" width="180">el-table-column>
    <el-table-column prop="name" label="姓名" width="180">el-table-column>
el-table>

checkSelect(data){
    console.log(`选中项数据：${data}`)
}
//动态控制选中项状态
toggleSelection(rows,status) {
    if(rows && rows.length>0){
        this.$nextTick(function () {
            rows.forEach(index => {
            	//toggleRowSelection(row, selected)切换行的选中状态
            	//row:行数据,selected:不传为切换，true勾选,false取消
                this.$refs.multipleTable.toggleRowSelection(this.tableData[index],status);
            })
        })
    }else{
        this.$refs.multipleTable.clearSelection();
    }
}
//eg:选中第三第四行，取消选中第五行
this.toggleSelection([3，4],true);
this.toggleSelection([5],false);
this.toggleSelection();