Element Table組件之可勾選的樹形數據

在 table 組件提供的樹形數據展示的基礎上，增加復選框可選。效果如下圖：

<template>
  <div>

    <el-form>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="經濟事項" width="220">
          <template slot-scope="scope">
            <el-checkbox
              label="scope.row.date"
              v-model="scope.row.checked"
              @change="checkChange(scope)"
            >{{scope.row.name}}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="英國公司(GBP)">
          <el-table-column label="上限" class-name="relateInputCol-left">
            <input type="input"  />
          </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "economics",
  data() {
    return {
      tableData: [
        {
          id: 1000,
          name: "費用報銷",
          checked: false,
          children: [
            {
              id: 10001,
              name: "工資獎金支付",
              checked: false
            },
            {
              id: 10002,
              name: "人工成本",
              checked: false
            },
            {
              id: 10003,
              name: "員工借款",
              checked: false
            },
            {
              id: 10004,
              name: "管理費用",
              checked: false
            },
            {
              id: 10005,
              name: "審計費",
              checked: false
            },
            {
              id: 10006,
              name: "團建費",
              checked: false
            },
            {
              id: 10007,
              name: "業務招待費",
              checked: false
            },
            {
              id: 10008,
              name: "會議費",
              checked: false
            },
            {
              id: 10009,
              name: "通信費",
              checked: false
            },
            {
              id: 100010,
              name: "備用金",
              checked: false
            },
            {
              id: 100011,
              name: "其他業務費",
              checked: false
            },
            {
              id: 100012,
              name: "其他應付",
              checked: false
            },
            {
              id: 100013,
              name: "資產購置",
              checked: false
            },
            {
              id: 100014,
              name: "工程服務",
              checked: false
            }
          ]
        },
        {
          id: 1002,
          name: "財務",
          checked: false,
          children: [
            {
              id: 100201,
              name: "財務處理",
              checked: false,
              children: [
                {
                  id: 100202,
                  name: "財務核算專用",
                  checked: false
                }
              ]
            }
          ]
        },
        {
          id: 1003,
          name: "采購訂單管理",
          checked: false,
          children: [
            {
              id: 100301,
              name: "訂單付款及發票校驗",
              checked: false
            }
          ]
        }
      ]
    };
  },
  methods: {
       // 掃描 table 數據，處理父級選中狀態
    scan(obj, row) {
      var flag = true; // 父節點直屬所有子節點都選中時值為 true ，反之為 false
      for (var i = 0; i < obj.length; i++) {
                // 如果當前行為點擊行且為不選中狀態，返回 false
                if(row.id === obj[i].id && !row.checked) {
                    return false;
                }
        if (!obj[i].checked) {
            // 所有子節點都選中，父級選中
          if (obj[i].hasOwnProperty("children") && this.scan(obj[i].children, row)) {
            obj[i].checked = true;
          } else {
            flag = false;
          }
        } else {
            // 子節點存在未選中，父級不選中
          if (obj[i].hasOwnProperty("children") && !this.scan(obj[i].children, row)) {
            flag = false;
                        obj[i].checked = false;
                        return flag;
          }
        }
      }
      return flag;
    },
    checkChange(scope) {
      if (scope.row.hasOwnProperty("children")) {
        this.handleCheckAll(scope.row, scope.row.checked);
      }

      this.scan(this.tableData);
    },
    handleCheckAll(row, checked) {
      row.checked = checked;
      if (row.hasOwnProperty("children")) {
        let that = this;
        row.children.forEach((element, i) => {
          that.handleCheckAll(row.children[i], checked);
        });
      }
    }
  }
};
</script>