這節主要講了elementui的對話框,以及對話框結合form使用
關鍵代碼:
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <el-form :model="category"> <el-form-item label="分類名稱"> <el-input v-model="category.name" autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="addCategory">確 定</el-button> </span> </el-dialog>
:visible.sync控制對話框是否顯示
<el-form綁定整個表單,el-input綁定輸入框
我的本節category.vue代碼:
<template> <div> <el-tree :data="menus" :props="defaultProps" show-checkbox="" node-key="catId" :expand-on-click-node="false" :default-expanded-keys="expandedkey" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)" > Append </el-button> <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)" > Delete </el-button> </span> </span> </el-tree> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <el-form :model="category"> <el-form-item label="分類名稱"> <el-input v-model="category.name" autocomplete="off"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="addCategory">確 定</el-button> </span> </el-dialog> </div> </template> <script> //這裏可以導入其他文件(比如:組件,工具js,第三方插件js,json文件,圖片文件等等) //例如:import 《組件名稱》 from '《組件路徑》'; export default { data() { return { category: { name: "", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0 }, dialogVisible: false, expandedkey: [], menus: [], defaultProps: { children: "children", label: "name", }, }; }, created() { console.log(this.expandedkey); this.getMenus(); }, methods: { addCategory() { this.$http({ url: this.$http.adornUrl("/product/category/save"), method: "post", data: this.$http.adornData(this.category, false), }).then(({ data }) => { this.$message({ message: "菜單保存成功", type: "success", }); //關閉對話框 this.dialogVisible = false; //刷新出新的菜單 this.getMenus(); //設置需要默認展開的菜單 this.expandedkey = [this.category.parentCid]; }); }, remove(node, data) { let ids = [data.catId]; console.log(ids); console.log(node); this.$confirm(`是否刪除${data.name}菜單?`, "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$http({ url: this.$http.adornUrl("/product/category/delete"), method: "post", data: this.$http.adornData(ids, false), }).then(({ data }) => { this.$message({ message: "菜單刪除成功", type: "success", }); this.getMenus(); console.log(node.parent.data.catId); this.expandedkey = [node.parent.data.catId]; }); }) .catch(() => {}); }, append(data) { this.dialogVisible = true; this.category.parentCid = data.catId; this.category.catLevel = data.catLevel * 1 + 1; }, getMenus() { this.$http({ url: this.$http.adornUrl("/product/category/list/tree"), method: "get", }).then(({ data }) => { console.log("成功獲取菜單", data.data); this.menus = data.data; console.log("thismenus", this.menus); }); }, }, }; </script> <style scoped> </style>