vxe-table 动态列 tree-node功能

vxe-table 动态列 和tree-node功能

官网参考资料
https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/tree

实现过程-代码

组件

	<vxe-table
        :data="tableData"
        :columns="tableColumn" // 动态列
        :tree-config="{children: 'children'}">
        	
        		<!-- 插槽用法 -->
              <template v-slot:index_id="{ row, column }">
		        <span>{{row.Id}}--插槽:可随便写一些你想写的内容</span>
		      </template>
      </vxe-table>

动态列

data(){
	retrun {
		tableColumn: [
	        { 	field: "Id", 
	        	title: "Id", 
	        	width: 80,
	        	treeNode: true, // 树节点声明--重点
	          	slots: { default: "index_id"} // 插槽声明
	        },
	        {
	          field: "sex",
	          title: "sex",
	          width: 120,
	          editRender: { name: "input" }
	        },
	        {
	          field: "date",
	          title: "date",
	          width: 120,
	          editRender: { name: "input" }
	        }
      ],
      tableData: [{
        Id: '1',
        sex: '男',
        date: '2019-08',
        children: [
          {
            Id: '1-2',
        	sex: '女',
        	date: '2019-08',
            children: [
              {
                Id: '1-3',
                sex: '男',
                date: '2019-08',
              },
              {
                Id: '1-4',
                sex: '男',
                date: '2019-08',
              }
            ]
         },
         {
           Id: '2',
           sex: '女',
           date: '2019-08'
          }
	}
}

如有不懂，可留评论哈！