全栈课程笔记：ElementUI分类列表、分类编辑页⾯
1.创建分类
2.编辑分类
3.新增物品
4.编辑物品
安装必要模块
npm i axios -s
路由建⽴
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Main from './views/Main.vue'
import CategoryEdit from './views/CategoryEdit.vue'
import CategoryList from './views/CategoryList.vue'
import ItemEdit from './views/ItemEdit.vue'
import ItemList from './views/ItemList.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: v.BASE_URL,
routes: [
{
path: '/',
vue element adminname: 'Main',
component: Main,
children: [
{ path: '/categories/create', component: CategoryEdit },
{ path: '/categories/edit/:id', component: CategoryEdit, props: true },        { path: '/categories/list', component: CategoryList },
{ path: '/items/create', component: ItemEdit },
{ path: '/items/edit/:id', component: ItemEdit, props: true },
{ path: '/items/list', component: ItemList }
]
}
]
})
Axios
建⽴http.js⽂件
import axios from 'axios'
const http = ate({
baseURL: 'localhost:3000/admin/api'
})
export default http
然后在main.js中加上
import http from './http'
Vue.prototype.$http = http
页⾯demo
<div>
<h1>{{id?'编辑':'新建'}}分类</h1>
<el-form label-width="120px" @submit.native.prevent="save">
<el-form-item label="上级分类">
<el-select v-model="model.parent">
<el-option v-for="item in parnets" :key="item._id" :label="item.name" :value="item._id"></el-option>        </el-select>
</el-form-item>
<el-form-item label="分类名称">
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
id: {}
},
data() {
return {
model: {},
parnets: []
};
},
methods: {
async save() {
let res;
if (this.id) {
res = await this.$http.put(`rest/categories/${this.id}`, del);
} else {
res = await this.$http.post("rest/categories", del);
}
this.$router.push("list");
this.$message({
type: "success",
message: "保存成功！"
});
},
async fetch() {
const res = await this.$(`rest/categories/${this.id}`);
},
async fetchParents() {
const res = await this.$(`rest/categories`);
this.parnets = res.data;
}
},
created() {
this.fetchParents();
this.id && this.fetch();
}
};
</script>
<div class="list">
<h1>分类列表</h1>
<el-table :data="items">
<el-table-column prop="_id" label="ID" width="220"></el-table-column>
<el-table-column prop="parent.name" label="上级分类"></el-table-column>
<el-table-column prop="name" label="分类名称"></el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="$router.push(`/categories/edit/${w._id}`)"
>编辑</el-button>
<el-button type="text" size="small" @click="w)">删除</el-button>        </template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
items: []
};
},
methods: {
async fetch() {
const res = await this.$("rest/categories");
this.items = res.data;
},
async remove(row) {
this.$confirm(`是否要删除分类：“${row.name}”`, "提⽰", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(async () => {
const res = await this.$http.delete(`rest/categories/${row._id}`);
this.$message({
type: "success",
message: "删除成功!"
});
this.fetch();
});
}
},
created() {
this.fetch();
}
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。