SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
   data () {
            return {
              tableData: [
                { id: 1000, name: 'vxe-table 从入门到放弃1', type: 'mp3', size: 1024, date: '2020-08-01' },
                {
                  id: 1005,
                  name: 'Test2',
                  type: 'mp4',
                  size: null,
                  date: '2021-04-01',
                  children: [
                    { id: 24300, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
                    { id: 20045, name: 'vxe-table 从入门到放弃4', type: 'html', size: 600, date: '2021-04-01' },
                    {
                      id: 10053,
                      name: 'vxe-table 从入门到放弃96',
                      type: 'avi',
                      size: null,
                      date: '2021-04-01',
                      children: [
                        { id: 24330, name: 'vxe-table 从入门到放弃5', type: 'txt', size: 25, date: '2021-10-01' },
                        { id: 21011, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
                        { id: 22200, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
                      ]
                    }
                  ]
                },
                { id: 23666, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
                { id: 24555, name: 'vxe-table 从入门到放弃9', type: 'avi', size: 224, date: '2020-10-01' }
              ]
            }
          },
          methods: {
            selectChangeEvent ({row}) {
              console.log(row)

            },
            getRowDataByClickCell ({row}) {
              console.log(row)
              var flag = this.$refs.xTree.isCheckboxIndeterminate(row)
              console.log(flag)
              alert("当前行名称为" + row.name + "  半选中状态为:" + flag)
            }
          }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/iview"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table-plugin-iview"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->

<div id="app">
  <template>
    <div>
      <vxe-table
          resizable
          ref="xTree" 
          row-id="id"
          :data="tableData"
          :tree-config="{children: 'children'}"
          :checkbox-config="{labelField: 'name', checkRowKeys: [10053, 23666]}"
          @checkbox-change="selectChangeEvent"
          @cell-click="getRowDataByClickCell">
          <vxe-table-column type="checkbox" title="名称" width="400" tree-node></vxe-table-column>
          <vxe-table-column field="size" title="Size"></vxe-table-column>
          <vxe-table-column field="type" title="Type"></vxe-table-column>
          <vxe-table-column field="date" title="Date"></vxe-table-column>
        </vxe-table>
    </div>
  </template>
</div>
@import url("//unpkg.com/vxe-table/lib/index.css");
@import url("//unpkg.com/iview/dist/styles/iview.css");
@import url("//unpkg.com/vxe-table-plugin-iview/dist/style.min.css");