vue 项目的树形表格（二）

假设我们从后台请求回来的事一个一维数组，我们需要点击某一行展开表格，我们使用elementui的树形表格：

<div>
    	<el-table
	    :data="tableData1"
	    style="width: 100%"
	    row-key="id"
	    border
	    lazy
	    :load="load"
        @selection-change="handleSelectionChange"
        ref="table"
	    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
         <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-column
	      prop="address"
	      label="地址">
	    </el-table-column>
	  </el-table>
    </div>

一维数组数据： 

data() {
	  return{
	  	  tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
	  }
    },

用一个延时器模拟 请求接口数据：

load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-08',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-08',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      },

 

当我们需要在展开的表格上加上单选框时，elementui是默认的多选框，我们可以做是的的修改：

每次触发选择时都对所选的的数组之前选的内容取消选中状态，同时对保存数据的数组进行清空，只保存最后选的那个数据

handleSelectionChange(val){
for (var i = 0; i < val.length - 1; i++) {
    this.$refs.table.toggleRowSelection(val[i], false)
   }
   this.sels = []
   this.sels.push(val[val.length - 1])
   console.log('单选2', this.sels)
}

这样就可以实现单选的效果了。