公司网站及微信公众号建设意义,好用的外贸网站,网站地址查询ip,茶叶网站模板下载看效果图是否是你需要的
这是原来没有Element-ui框架的 首先#xff0c;你要在你的项目里安装Element-ui yarn命令 yarn add element-uinpm命令
npm install element-ui --save好了现在可以粘贴代码 //main.js
import Vue from vue
import Vuex from vuex
import VueRouter …看效果图是否是你需要的
这是原来没有Element-ui框架的 首先你要在你的项目里安装Element-ui yarn命令 yarn add element-uinpm命令
npm install element-ui --save好了现在可以粘贴代码 //main.js
import Vue from vue
import Vuex from vuex
import VueRouter from vue-router
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.css
import store from ./tool/store
import App from ./App.vue
import router from /tool/routerVue.use(Vuex)
Vue.use(VueRouter)
Vue.use(ElementUI)new Vue({el: #app,router,store,render: h h(App)
})
//store.js
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({state: {goodsList: []},mutations: {addGood(state, { name, price }) {state.goodsList.push({ id: state.goodsList.length 1, name, price })},delGood(state, id) {const index state.goodsList.findIndex(item item.id id)if (index ! -1) {state.goodsList.splice(index, 1)}},updateGood(state, { id, name, price }) {const good state.goodsList.find(item item.id id)if (good) {good.name namegood.price price}}}
})//router.js
import Vue from vue
import VueRouter from vue-router
import EditStore from /components/EditStore.vue
import IndexStore from /components/IndexStore.vueVue.use(VueRouter)const routes [{path: /,redirect: /index},{path: /index,component: IndexStore},{path: /edit/:id,component: EditStore,name: Edit,props: true}
]const router new VueRouter({routes
})export default router!-- EditStore.vue --
templatedivh3编辑商品/h3el-form :modelform label-width80pxel-form-item label商品名称el-input v-modelform.name/el-input/el-form-itemel-form-item label商品价格el-input-number v-modelform.price controls-positionright :min0/el-input-number/el-form-itemel-form-itemel-button typeprimary clicksubmit提交/el-button/el-form-item/el-form/div
/templatescript
export default {props: [id],computed: {goodInfo() {return this.$store.state.goodsList.find(item item.id this.id)}},data() {return {form: {name: ,price: 0}}},mounted() {this.form {name: this.goodInfo.name,price: this.goodInfo.price}},methods: {submit() {this.$store.commit({type: updateGood,id: this.id,name: this.form.name,price: this.form.price})this.$router.push(/index)}}
}
/script!-- IndexStore.vue --
templatedivh3 stylemargin-left: 200px商品列表/h3el-table :datagoodsList border stylewidth: 600px; margin-left: 200pxel-table-column propname label商品名称/el-table-columnel-table-column propprice label价格/el-table-columnel-table-column label操作template slot-scopescopeel-button typedanger sizemini clickdelGood(scope.row.id)删除/el-buttonel-button typeprimary sizemini clickeditGood(scope.row.id)编辑/el-button/template/el-table-column/el-tableel-button stylemargin-left: 200px; margin-top: 10px typeprimary clickadd添加商品/el-button/div
/templatescript
export default {name: IndexStore,computed: {goodsList() {return this.$store.state.goodsList;}},methods: {add() {const { name, price } this.randomGood()this.$store.commit({ type: addGood, name, price })},randomGood() {const goods [{ name: 洗衣机, price: 990 },{ name: 油烟机, price: 2239 },{ name: 电饭煲, price: 200 },{ name: 电视机, price: 880 },{ name: 电冰箱, price: 650 },{ name: 电脑, price: 4032 },{ name: 电磁炉, price: 210 }]return goods[parseInt(Math.random() * 7)]},delGood(id) {this.$store.commit(delGood, id)},editGood(id) {this.$router.push({ name: Edit, params: { id } })}}
}
/script
