Vue+Elenment笔记（一）：el-table使用多选框与树形数据写一个有半选全选功能的表格。

 完整代码：

<template>
<div class="tablrdev">
   <el-table
    :data="tableData"
    ref="multipleTable"
    row-key="id"
    show-checkbox
    select-on-indeterminate=""
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    node-click
    @select-all="selectchageall"
    border
    :header-cell-style="tableHeaderColor"
    row-class-name="setrowclassname">
    <el-table-column
      type="selection"
      align="center"
      width="60px" 
      fixed>
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.IsClick" :indeterminate="scope.row.isIndeterminate" @change="inCheckrow(scope.row)" />
      </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="名称"
      align="left"
      header-align="center"
      width="605px">
    </el-table-column>
    <el-table-column
      prop="size"
      label="大小"
      align="center"
      width="147px">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      align="center"
      width="269px">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
  data() {
    return {
      tableData: 
      [
        {
        id:1,
        parentId: 0,//层级id
        date: '哺乳动物',
        na