Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
	<h2>TreeGrid Template</h2>
	<TreeGrid style="height:250px"
			:data="data" :footerData="footerData" :showFooter="true"
			idField="id" treeField="name">
		<GridColumn field="name" title="Name" width="30%">
			<template slot="footer" slot-scope="{row}">
				<span class="tree-file icon-sum"></span>
				{{row.name}}
			</template>
		</GridColumn>
		<GridColumn field="persons" title="Persons" align="right"></GridColumn>
		<GridColumn field="begin" title="Begin Date"></GridColumn>
		<GridColumn field="end" title="End Date"></GridColumn>
		<GridColumn field="progress" title="Progress">
			<template slot="cell" slot-scope="{row}">
				<div class="progress">
					<div class="progress-inner" :style="{width:row.progress+'%'}">
						{{row.progress}} %
					</div>
				</div>
			</template>
		</GridColumn>
	</TreeGrid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      footerData: null
    };
  },
  created() {
    this.data = this.getData();
    this.footerData = [
      {
        name: "Total Persons:",
        persons: this.sum(this.data)
      }
    ];
  },
  methods: {
    sum(data) {
      let persons = 0;
      for (let row of data) {
        persons += row.persons || 0;
        if (row.children) {
          persons += this.sum(row.children);
        }
      }
      return persons;
    },
    getData() {
      return [
        {
          id: 1,
          name: "All Tasks",
          begin: "3/4/2017",
          end: "3/20/2017",
          progress: 60,
          iconCls: "icon-ok",
          children: [
            {
              id: 2,
              name: "Designing",
              begin: "3/4/2017",
              end: "3/10/2017",
              progress: 100,
              state: "closed",
              children: [
                {
                  id: 21,
                  name: "Database",
                  persons: 23,
                  begin: "3/4/2017",
                  end: "3/6/2017",
                  progress: 100
                },
                {
                  id: 22,
                  name: "UML",
                  persons: 12,
                  begin: "3/7/2017",
                  end: "3/8/2017",
                  progress: 100
                },
                {
                  id: 23,
                  name: "Export Document",
                  persons: 13,
                  begin: "3/9/2017",
                  end: "3/10/2017",
                  progress: 100
                }
              ]
            },
            {
              id: 3,
              name: "Coding",
              persons: 21,
              begin: "3/11/2017",
              end: "3/18/2017",
              progress: 80
            },
            {
              id: 4,
              name: "Testing",
              persons: 18,
              begin: "3/19/2017",
              end: "3/20/2017",
              progress: 20
            }
          ]
        }
      ];
    }
  }
};
</script>
<style>
.progress {
  width: 100%;
  height: 20px;
  border: 1px solid #ccc;
}
.progress-inner {
  height: 100%;
  background: red;
  color: #fff;
  padding: 0 4px;
}
</style>