ElementUI中Tree組件使用案例講解
首先官網上的樹形控件教程地址為Element - The world's most popular Vue UI framework
案例一:
要實現(xiàn)這種類型的樹控件,并且后邊相關操作:
1.1后端準備工作
首先,數(shù)據(jù)庫表為:
查詢接口返回的實體類為:
@Data @NoArgsConstructor @RequiredArgsConstructor // 有參構造 @EqualsAndHashCode(callSuper = false ,of = "name")// 表示以name去重寫的Equals和HashCode @Accessors(chain = true) @TableName("t_department") @ApiModel(value="Department對象", description="") public class Department implements Serializable { private static final long serialVersionUID = 1L; @ApiModelProperty(value = "id") @TableId(value = "id", type = IdType.AUTO) private Integer id; @ApiModelProperty(value = "部門名稱") @Excel(name = "部門") @NonNull private String name; @ApiModelProperty(value = "父id") private Integer parentId; @ApiModelProperty(value = "路徑") private String depPath; @ApiModelProperty(value = "是否啟用") private Boolean enabled; @ApiModelProperty(value = "是否上級") private Boolean isParent; @ApiModelProperty(value = "子部門列表") @TableField(exist = false) private List<Department> children; @ApiModelProperty(value = "返回結果,存儲過程使用") @TableField(exist = false) private Integer result; }
查詢接口返回的數(shù)據(jù)格式:通過屬性 children來判斷是否有子節(jié)點
[ { "id": 1, "name": "股東會", "parentId": -1, "depPath": ".1", "enabled": true, "isParent": true, "children": [ { "id": 2, "name": "董事會", "parentId": 1, "depPath": ".1.2", "enabled": true, "isParent": true, "children": [ { "id": 3, "name": "總辦", "parentId": 2, "depPath": ".1.2.3", "enabled": true, "isParent": true, "children": [ { "id": 4, "name": "財務部", "parentId": 3, "depPath": ".1.2.3.4", "enabled": true, "isParent": false, "children": [], "result": null }, { "id": 5, "name": "市場部", "parentId": 3, "depPath": ".1.2.3.5", "enabled": true, "isParent": true, "children": [ { "id": 6, "name": "華東市場部", "parentId": 5, "depPath": "1.2.3.5.6", "enabled": true, "isParent": true, "children": [ { "id": 8, "name": "上海市場部", "parentId": 6, "depPath": "1.2.3.5.6.8", "enabled": true, "isParent": false, "children": [], "result": null } ], "result": null }, { "id": 7, "name": "華南市場部", "parentId": 5, "depPath": "1.2.3.5.7", "enabled": true, "isParent": false, "children": [], "result": null }, { "id": 9, "name": "西北市場部", "parentId": 5, "depPath": ".1.2.3.5.9", "enabled": true, "isParent": true, "children": [ { "id": 10, "name": "貴陽市場", "parentId": 9, "depPath": ".1.2.3.5.9.10", "enabled": true, "isParent": true, "children": [ { "id": 11, "name": "烏當區(qū)市場", "parentId": 10, "depPath": ".1.2.3.5.9.10.11", "enabled": true, "isParent": false, "children": [], "result": null } ], "result": null } ], "result": null } ], "result": null }, { "id": 12, "name": "技術部", "parentId": 3, "depPath": ".1.2.3.12", "enabled": true, "isParent": false, "children": [], "result": null }, { "id": 13, "name": "運維部", "parentId": 3, "depPath": ".1.2.3.13", "enabled": true, "isParent": false, "children": [], "result": null } ], "result": null } ], "result": null }, { "id": 150, "name": "aaa", "parentId": 1, "depPath": ".1.150", "enabled": true, "isParent": true, "children": [ { "id": 151, "name": "abbb", "parentId": 150, "depPath": ".1.150.151", "enabled": true, "isParent": false, "children": [], "result": null } ], "result": null }, { "id": 154, "name": "ccc", "parentId": 1, "depPath": ".1.154", "enabled": true, "isParent": false, "children": [], "result": null }, { "id": 157, "name": "dddd", "parentId": 1, "depPath": ".1.157", "enabled": true, "isParent": false, "children": [], "result": null } ], "result": null } ]
1.2前端代碼
從官網上復制一個模板過來,搜索的話,直接往下找一個有搜索框的,把搜索框復制過來,復制好就可以開始修改,寫增刪改查的方法調用了。
寫好的代碼如下:
<template> <div style="width: 550px;"> <el-input placeholder="請輸入部門名稱進行搜索..." prefix-icon="el-icon-search" v-model="filterText"> </el-input> <el-tree :data="deps" :props="defaultProps" :filter-node-method="filterNode" :expand-on-click-node="false" ref="tree"> <!-- slot-scope可以自定義樹節(jié)點里的內容,node當前節(jié)點的node對象,data后端對應返回的數(shù)據(jù) --> <span class="custom-tree-node" slot-scope="{ node, data }" style="display:flex; justify-content: space-between;width: 100%;"> <span>{{ data.name }}</span> <span> <el-button type="primary" size="mini" class="depBtn" @click="() => showAddDep(data)"> 添加部門 </el-button> <el-button type="danger" size="mini" class="depBtn" @click="() => deleteDep(data)"> 刪除部門 </el-button> </span> </span> </el-tree> <!-- 添加部門的彈出框 --> <el-dialog title="添加部門" :visible.sync="dialogVisible" width="30%"> <div> <table> <tr> <td><el-tag>上級部門</el-tag></td> <td><el-tag>{{pname}}</el-tag></td> </tr> <tr> <td><el-tag>部門名稱</el-tag></td> <td><el-input v-model="dep.name" placeholder="請輸入部門名稱..."></el-input></td> </tr> </table> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="doAddDep">確 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data(){ return{ // 樹的搜索條件 filterText: '', // 樹的數(shù)據(jù) deps: [], // 樹的配置 defaultProps: { children: 'children', label: 'name' }, // 添加彈出框 dialogVisible: false, // 添加的部門數(shù)據(jù) dep:{ name:'', parentId: -1 }, // 上級部門名稱 pname: '' } }, mounted(){ this.initDeps(); }, methods: { // 初始化數(shù)據(jù) initDeps(){ this.getRequest('/system/basic/department/').then(resp=>{ this.deps = resp; }) }, // 樹的搜索 filterNode(value, data) { if (!value) return true; return data.name.indexOf(value) !== -1; }, // 添加彈框 showAddDep(data){ console.log(data) this.dep.parentId = data.id; this.pname = data.name; this.dialogVisible = 'true' }, // 添加 doAddDep(){ this.postRequest('/system/basic/department/',this.dep).then(resp=>{ if(resp.code==200){ resp.obj.children = [] this.addDep2Deps(this.deps,resp.obj); this.initDep(); this.dialogVisible = false; } }) }, initDep(){ this.dep = { name: '', parentId: -1 } this.panme = '' }, // 添加成功后手動的給樹加數(shù)據(jù) addDep2Deps(deps,dep){ for(let i = 0; i<deps.length; i++){ let d= deps[i]; if(d.id == dep.parentId){ d.children = d.children.concat(dep); if(d.children.length>0){ d.isParent = true; } return; }else{ // 遞歸 this.addDep2Deps(d.children,dep); } } }, // 刪除 deleteDep(data){ console.log(data) if(data.isParent){ this.$message.error("父部門無法刪除"); }else{ this.$confirm('此操作將永久['+data.name+']部門, 是否繼續(xù)?', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.deleteRequest('/system/basic/department/'+data.id).then(resp=>{ if(resp.code==200){ this.removeDepFromDeps(null,this.deps,data.id); } }) }).catch(() => { this.$message({ type: 'info', message: '已取消刪除' }); }); } }, // 手動刪除 (父部門,總部門數(shù)據(jù),要刪除的部門id) removeDepFromDeps(p,deps,id){ for(let i=0; i<deps.length; i++){ let d = deps[i]; if(d.id==id){ deps.splice(i,1); if(deps.length==0){ p.isParent = false; } return; }else{ this.removeDepFromDeps(d,d.children,id); } } } }, watch: { filterText(val) { this.$refs.tree.filter(val); } } } </script> <style> .depBtn{ padding: 3px; } </style>
需要注意的是:
1:樹組件中 :data="deps" 加載樹組建的數(shù)據(jù)。:props="defaultProps" 加載樹組件的配置,其中l(wèi)abel是給個枝葉的名字對應的字段,children是子節(jié)點對應的字段。:filter-node-method="filterNode" 樹組件的搜索,filterNode過濾的回調,這個官網拷貝即可。:expand-on-click-node="false" 關閉點擊折疊,只有點擊前面的小三角才能展開折疊。
2:搜索框綁定的數(shù)據(jù)filterText,下面監(jiān)聽這個數(shù)據(jù)的改變,如果改變了,就調用樹的filter方法(this.$refs.tree.filter(val);),進行過濾,這個方法的回調在樹組件的屬性中定義:filter-node-method="filterNode" ,也就是輸入框值改變了,會去掉filterNode這個方法,這個方法傳入兩個值,value是文本框輸入值,data是樹組件的數(shù)據(jù),value為空直接返回,不為空則過濾。
3: 添加部門的時候,添加成功后不能單純的掉接口,重新請求一次樹中的數(shù)據(jù),這樣的話,每添加一個部門,整個樹就會折疊起來。這時候就需要不調接口請求新的數(shù)據(jù),在js中操作樹中的數(shù)據(jù)this.deps,讓它和數(shù)據(jù)庫保持同步。首先在成功后調用方法: addDep2Deps(deps,dep) 這個方法第一個參數(shù)是整個樹中的數(shù)據(jù),第二個參數(shù)是新添加的樹的數(shù)據(jù)(這個數(shù)據(jù)是添加成功接口回顯的數(shù)據(jù),也就是添加的這條記錄信息)在這個方法中,會循環(huán),找到對應的父節(jié)點,給它的子節(jié)點拼接數(shù)據(jù),修改父節(jié)點isParent屬性(是否有孩子),之后就一直遞歸,知道添加完成為止。這個數(shù)據(jù)添加成功后,清空彈出框中輸入的信息,關閉彈出框。
4:刪除操作,同樣,刪除時也要手動的在js中把這條數(shù)據(jù)刪除,不能請求新數(shù)據(jù),請求新數(shù)據(jù)會導致樹整個關閉,用戶體驗十分不好,需要在js中把樹中的數(shù)據(jù)和數(shù)據(jù)庫中進行同步。
調用接口刪除成功后,調用removeDepFromDeps(p,deps,id)方法,在js中進行數(shù)據(jù)刪除,調用時,第一個參數(shù)傳null表示從頂層節(jié)點開始往下找,第二個參數(shù)是樹的數(shù)據(jù),第三個參數(shù)是要刪除部門的id。同樣進行循環(huán),添加中比較的是父節(jié)點的id,刪除是,比較的就是這個葉子的id,如果相同,那就刪除,同時,判斷把這個葉子刪掉后,這個枝下面還有沒有葉子,因為有葉子的枝是不能刪除的,所以要再判斷一下修改isParent的狀態(tài),之后還是一樣,在一層中沒有查詢到的話,就遞歸到下一層去找。
案例二
這種前面帶有選擇框的,進行授權操作
2.1后端準備
對應的數(shù)據(jù)庫表
對應的實體類:
@Data @EqualsAndHashCode(callSuper = false) @Accessors(chain = true) @TableName("t_menu") @ApiModel(value="Menu對象", description="") public class Menu implements Serializable { private static final long serialVersionUID = 1L; @ApiModelProperty(value = "id") @TableId(value = "id", type = IdType.AUTO) private Integer id; @ApiModelProperty(value = "url") private String url; @ApiModelProperty(value = "path") private String path; @ApiModelProperty(value = "組件") private String component; @ApiModelProperty(value = "菜單名") private String name; @ApiModelProperty(value = "圖標") private String iconCls; @ApiModelProperty(value = "是否保持激活") private Boolean keepAlive; @ApiModelProperty(value = "是否要求權限") private Boolean requireAuth; @ApiModelProperty(value = "父id") private Integer parentId; @ApiModelProperty(value = "是否啟用") private Boolean enabled; @ApiModelProperty(value = "子菜單") @TableField(exist = false) // 告訴mybatisplus這個字段不在表中,查詢的時候不要去查 private List<Menu> children; @ApiModelProperty(value = "角色列表") @TableField(exist = false) private List<Role> roles; }
查詢接口返回的數(shù)據(jù)
{ "code": 200, "message": "查詢成功", "obj": [ { "id": 1, "url": null, "path": null, "component": null, "name": "所有", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": [ { "id": 2, "url": null, "path": null, "component": null, "name": "員工資料", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": [ { "id": 7, "url": null, "path": null, "component": null, "name": "基本資料", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 8, "url": null, "path": null, "component": null, "name": "高級資料", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null } ], "roles": null }, { "id": 3, "url": null, "path": null, "component": null, "name": "人事管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": [ { "id": 9, "url": null, "path": null, "component": null, "name": "員工資料", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 10, "url": null, "path": null, "component": null, "name": "員工獎懲", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 11, "url": null, "path": null, "component": null, "name": "員工培訓", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 12, "url": null, "path": null, "component": null, "name": "員工調薪", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 13, "url": null, "path": null, "component": null, "name": "員工調動", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null } ], "roles": null }, { "id": 4, "url": null, "path": null, "component": null, "name": "薪資管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": [ { "id": 14, "url": null, "path": null, "component": null, "name": "工資賬套管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 15, "url": null, "path": null, "component": null, "name": "員工賬套設置", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 16, "url": null, "path": null, "component": null, "name": "工資表管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 17, "url": null, "path": null, "component": null, "name": "月末處理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 18, "url": null, "path": null, "component": null, "name": "工資表查詢", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null } ], "roles": null }, { "id": 5, "url": null, "path": null, "component": null, "name": "統(tǒng)計管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": [ { "id": 19, "url": null, "path": null, "component": null, "name": "綜合信息統(tǒng)計", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 20, "url": null, "path": null, "component": null, "name": "員工積分統(tǒng)計", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 21, "url": null, "path": null, "component": null, "name": "人事信息統(tǒng)計", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 22, "url": null, "path": null, "component": null, "name": "人事記錄統(tǒng)計", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null } ], "roles": null }, { "id": 6, "url": null, "path": null, "component": null, "name": "系統(tǒng)管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": [ { "id": 23, "url": null, "path": null, "component": null, "name": "基礎信息設置", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 24, "url": null, "path": null, "component": null, "name": "系統(tǒng)管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 25, "url": null, "path": null, "component": null, "name": "操作日志管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 26, "url": null, "path": null, "component": null, "name": "操作員管理", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 27, "url": null, "path": null, "component": null, "name": "備份恢復數(shù)據(jù)庫", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null }, { "id": 28, "url": null, "path": null, "component": null, "name": "初始化數(shù)據(jù)庫", "iconCls": null, "keepAlive": null, "requireAuth": null, "parentId": null, "enabled": null, "children": null, "roles": null } ], "roles": null } ], "roles": null } ] }
2.2前端代碼
<template> <div> <!-- 添加角色 --> <div class="permissManaTool"> <el-input size="small" placeholder="請輸入角色英文名" v-model="role.name"> <template slot="prepend">ROLE_</template> </el-input> <el-input size="small" placeholder="請輸入角色中文名" v-model="role.nameZh" @keydown.enter.native="addRole"></el-input> <el-button size="small" type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button> </div> <!-- 手風琴 --> <div style="margin-top:10px; width:660px"> <el-collapse v-model="activeName" accordion @change="change"> <el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index"> <!-- 卡片 --> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>可訪問資源</span> <el-button style="float: right; padding: 3px 0; color: #ff0000;" type="text" icon="el-icon-delete" @click="doDeleteRole(r)"></el-button> </div> <div> <!-- 樹 --> <el-tree show-checkbox node-key="id" ref="tree" :key="index" :default-checked-keys="selectMenus" :data="allMenus" :props="defaultProps"></el-tree> <div style="display:flex; justify-content: flex-end"> <el-button size="mini" @click="cancelUpdate">取消修改</el-button> <el-button size="mini" type="primary" @click="doUpdate(r.id,index)">確定修改</el-button> </div> </div> </el-card> </el-collapse-item> </el-collapse> </div> </div> </template> <script> export default { data(){ return{ role:{ name:'', nameZh:'' }, activeName : '-1', roles:[], allMenus: [], // 樹菜單的屬性,children子菜單的屬性,label顯示出來的名字,都是后端接口返回來的字段名字 defaultProps: { children: 'children', label: 'name' }, // 樹中選中的節(jié)點 selectMenus: [] } }, mounted(){ this.initRoles(); }, methods:{ // 初始化所有菜單 initAllMenus(){ this.getRequest('/system/basic/permiss/menus').then(resp=>{ if(resp.code==200){ this.allMenus = resp.obj; } }) }, // 根據(jù)角色id獲取菜單 initSelectdMenus(rid){ this.getRequest('/system/basic/permiss/mid/'+rid).then(resp=>{ if(resp.code==200){ this.selectMenus = resp.obj; } }) }, // 獲取角色列表 initRoles(){ this.getRequest('/system/basic/permiss/').then(resp=>{ if(resp.code==200){ this.roles = resp.obj; } }) }, // 手風琴點擊事件,展開rid是每個name,name對應著后端字段id,關閉時rid為空 change(rid){ if(rid){ this.initAllMenus(); this.initSelectdMenus(rid); } }, // 修改角色權限 doUpdate(rid,index){ // 拿到這個手風琴下面的樹 let tree = this.$refs.tree[index]; // 傳true只打印葉子節(jié)點的id let selectedKeys = tree.getCheckedKeys(true); let url = '/system/basic/permiss/?rid='+ rid; selectedKeys.forEach(key => { url += '&mids='+ key; }); this.putRequest(url).then(resp=>{ if(resp.code==200){ this.activeName = '-1' } }) }, cancelUpdate(){ this.activeName = '-1' }, // 添加角色 addRole(){ if(this.role.name && this.role.nameZh){ this.postRequest('/system/basic/permiss/',this.role).then(resp=>{ if(resp.code==200){ this.initRoles(); this.role.name = ''; this.role.nameZh = ''; } }) }else{ this.$message.error("所有字段不能為空"); } }, // 刪除角色 doDeleteRole(role){ this.$confirm('此操作將永久刪除'+role.nameZh+'角色, 是否繼續(xù)?', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.deleteRequest('/system/basic/permiss/role/'+r.id).then(resp => { if(resp.code == 200){ this.initRoles(); }else{ this.$message.error(resp.message) } }) }).catch(() => { this.$message({ type: 'info', message: '已取消刪除' }); }); } } } </script> <style> .permissManaTool{ display: flex; justify-content: flex-start; } .permissManaTool .el-input{ width: 300px; margin-right: 10px; } </style>
值得注意的是:
1:每個角色下面展開的權限樹列表用的是手風琴組件(折疊面板)這里還要給樹加上key,因為每個手風琴下面都是一個樹 折疊面板餓了嗎官網
2:樹要展示前面的選擇框,要給樹組件加上show-checkbox屬性。:default-checked-keys="selectMenus" 默認選中的key,這個selectMenus需要去data中定義一個數(shù)組。
3:在添加時,可通過 let tree = this.$refs.tree[index]; 拿到整個手風琴下面的樹,let selectedKeys = tree.getCheckedKeys(true) 獲取選中節(jié)點的id,修改成功后,把手風琴的折疊屬性,定義成-1,折疊即可,因為下次再打開的時候,會去數(shù)據(jù)庫查出這個角色對應菜單的最新數(shù)據(jù)。
到此這篇關于ElementUI中Tree組件使用的文章就介紹到這了,更多相關ElementUI中Tree組件使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理
這篇文章主要介紹了詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理,引入Promise確實能夠很好的解決異步回調函數(shù)的可讀性等問題,同時也使得我們調用的時候代碼簡潔一些,本文介紹如何在小程序的JS代碼里面使用Promise來封裝一些函數(shù)的做法2019-03-03bootstrap-closable-tab可實現(xiàn)關閉的tab標簽頁插件
這篇文章主要為大家詳細介紹了bootstrap-closable-tab可實現(xiàn)關閉的tab標簽頁插件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08詳解webpack import()動態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動態(tài)加載模塊踩坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07淺談js函數(shù)三種定義方式 & 四種調用方式 & 調用順序
下面小編就為大家?guī)硪黄獪\談js函數(shù)三種定義方式 & 四種調用方式 & 調用順序。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02