zoukankan      html  css  js  c++  java
  • element-ui的表格树使用(完整版)

    表格树,element-tree-grid需要单独下载并再配合elementUi里el-table使用。
    步骤:1、npm install element-tree-grid --save(下载element-tree-grid)
    步骤:2、在main.js中引用import ElTreeGrid from 'element-tree-grid'     Vue.component(ElTreeGrid.name,ElTreeGrid) 

    效果截图           

    QQ截图20200708152341.png

    代码实现            

     THIS IS TITLE                           

    <!-- 菜单树 -->
    <template>
      <div class="menus-tree">
      <el-table :data="model.menus" border max-height="400" ref="table">
          <el-table-column prop="id" label="id" type="selection" fixed></el-table-column>
          <el-table-tree-column fixed :expand-all="!!1" :remote="remote" file-icon="icon icon-file"
              folder-icon="icon icon-folder" prop="label" label="title" width="320" class-name="123"
              header-align="center">
          </el-table-tree-column>
          <el-table-column prop="description" label="Description" :show-overflow-tooltip="true" width="180">
          </el-table-column>
      </el-table>
      </div>
    </template>
    <script>
    	var flatTree = [{
    	    "id": 1,
    	    "label": "System",
    	    "parent_id": null,
    	    "url": null,
    	    "depth": 0,
    	    "child_num": 3,
    	    "description": "System Manager"
    	}, {
    	    "id": 2,
    	    "label": "base",
    	    "parent_id": 1,
    	    "depth": 1,
    	    "child_num": 5,
    	    "description": "Base Manager",
    	}, {
    	    "id": 3,
    	    "label": "Menus",
    	    "parent_id": 2,
    	    "depth": 2,
    	    "child_num": 0,
    	    "description": "menu manager",
    	}, {
    	    "id": 4,
    	    "label": "Roles",
    	    "parent_id": 2,
    	    "depth": 2,
    	    "child_num": 0,
    	    "description": "Role Manager",
    	}, {
    	    "id": 5,
    	    "label": "Users",
    	    "parent_id": 2,
    	    "depth": 2,
    	    "child_num": 0,
    	    "description": "User Manager",
    	}, {
    	    "id": 6,
    	    "label": "Customs",
    	    "parent_id": null,
    	    "url": null,
    	    "depth": 0,
    	    "child_num": 2,
    	    "description": "Custom Manager",
    	}, {
    	    "id": 7,
    	    "label": "CustomList",
    	    "parent_id": 6,
    	    "depth": 1,
    	    "child_num": 0,
    	    "description": "CustomList",
    	}, {
    	    "id": 8,
    	    "label": "Templates",
    	    "parent_id": null,
    	    "url": null,
    	    "depth": 0,
    	    "child_num": 1,
    	    "description": "Template Manager",
    	}, {
    	    "id": 9,
    	    "label": "TemplateList",
    	    "parent_id": 8,
    	    "depth": 1,
    	    "child_num": 0,
    	    "description": "Template Manager",
    	}, {
    	    "id": 10,
    	    "label": "Bussiness",
    	    "parent_id": null,
    	    "url": null,
    	    "depth": 0,
    	    "child_num": 2,
    	    "description": "Bussiness Manager",
    	},
    	{
    	    "id": 11,
    	    "label": "BussinessList",
    	    "parent_id": 10,
    	    "url": null,
    	    "depth": 1,
    	    "child_num": 2,
    	    "description": "BussinessList",
    	    "children": []
    	}, {
    	    "id": 12,
    	    "label": "Currencies",
    	    "parent_id": 11,
    	    "depth": 2,
    	    "child_num": 0,
    	    "description": "Currencies",
    	}, {
    	    "id": 13,
    	    "label": "Dealtypes",
    	    "parent_id": 11,
    	    "depth": 2,
    	    "child_num": 0,
    	    "description": "Dealtypes",
    	}, {
    	    "id": 14,
    	    "label": "Products",
    	    "parent_id": 10,
    	    "url": null,
    	    "depth": 1,
    	    "child_num": 2,
    	    "description": "Products"
    	}, {
    	    "id": 15,
    	    "label": "ProductTypes",
    	    "parent_id": 14,
    	    "depth": 2,
    	    "child_num": 0,
    	    "description": "ProductTypes",
    	}, {
    	    "id": 16,
    	    "label": "ProductList",
    	    "parent_id": 14,
    	    "depth": 2,
    	    "child_num": 0,
    	    "description": "ProductList",
    	}]
    	  export default {
    	    data() {
    	      return {
    			 model: {
    			     menus: flatTree.filter(f => f['parent_id'] == null)
    			 }
    	        
    	      }
    	    },
    	    methods: {
    	    remote(row, callback) {
    	        callback(flatTree.filter(f => f['parent_id'] == row['id']))
    	    },
    	    formatter(row, column) {
    	        return ' ---  ' + row.label;
    	    },
    	    cl() {
    	        this.$refs.table.$emit("clearTreeCloumn")
    	    }
    	    }
    	  }
    	</script>
      <style type="text/css">
           
            .icon-file {
                padding-right: 7px;
                padding-left: 18px
            }
    
            .icon-folder,
            .icon-folder-open {
                padding-left: 7px;
                padding-right: 7px
            }
        </style>
    

      

    
    
  • 相关阅读:
    WCF 第十三章 可编程站点 为站点创建操作
    WCF 第十三章 可编程站点 所有都与URI相关
    WCF 第十二章 对等网 使用自定义绑定实现消息定向
    WCF 第十三章 可编程站点 使用WebOperationContext
    Using App.Config for user defined runtime parameters
    WCF 第十三章 可编程站点
    WCF 第十三章 可编程站点 使用AJAX和JSON进行网页编程
    WCF 第十二章 总结
    WCF 第十三章 可编程站点 使用WebGet和WebInvoke
    WCF 第十三章 可编程站点 URI和UriTemplates
  • 原文地址:https://www.cnblogs.com/boyzi/p/13267228.html
Copyright © 2011-2022 走看看