Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
	<h2>TreeGrid CheckBox</h2>
	<TreeGrid style="height:250px"
			:data="data" :checkbox="true" idField="id" treeField="name">
		<GridColumn field="name" title="Name"></GridColumn>
		<GridColumn field="size" title="Size"></GridColumn>
		<GridColumn field="date" title="Date"></GridColumn>
	</TreeGrid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: this.getData()
    };
  },
  methods: {
    getData() {
      return [
        {
          id: 1,
          name: "C",
          size: "",
          date: "02/19/2010",
          children: [
            {
              id: 2,
              name: "Program Files",
              size: "120 MB",
              date: "03/20/2010",
              children: [
                {
                  id: 21,
                  name: "Java",
                  size: "",
                  date: "01/13/2010",
                  state: "closed",
                  children: [
                    {
                      id: 211,
                      name: "java.exe",
                      size: "142 KB",
                      date: "01/13/2010"
                    },
                    {
                      id: 212,
                      name: "jawt.dll",
                      size: "5 KB",
                      date: "01/13/2010"
                    }
                  ]
                },
                {
                  id: 22,
                  name: "MySQL",
                  size: "",
                  date: "01/13/2010",
                  state: "closed",
                  children: [
                    {
                      id: 221,
                      name: "my.ini",
                      size: "10 KB",
                      date: "02/26/2009"
                    },
                    {
                      id: 222,
                      name: "my-huge.ini",
                      size: "5 KB",
                      date: "02/26/2009"
                    },
                    {
                      id: 223,
                      name: "my-large.ini",
                      size: "5 KB",
                      date: "02/26/2009"
                    }
                  ]
                }
              ]
            },
            {
              id: 3,
              name: "eclipse",
              size: "",
              date: "01/20/2010",
              children: [
                {
                  id: 31,
                  name: "eclipse.exe",
                  size: "56 KB",
                  date: "05/19/2009"
                },
                {
                  id: 32,
                  name: "eclipse.ini",
                  size: "1 KB",
                  date: "04/20/2010"
                },
                {
                  id: 33,
                  name: "notice.html",
                  size: "7 KB",
                  date: "03/17/2005"
                }
              ]
            }
          ]
        }
      ];
    }
  }
};
</script>