作业40
把elementUI和vue-router安装到vue里面，并对于todolist和商品管理的功能，按钮，输入框，删除提示进行UI美化，使用ElementUI提供的样式和特效进行加工。
要求：
1. todolist和商品管理是2个独立的页面组件，有属于自己的url地址，相互之间可以通过按钮进行页面跳转.
2. 每一个页面组件至少加入3个以上的ElementUI的效果。
Todolist.vue
<template>
<div class="list_con">
<h2>To do list</h2>
<el-input v-model="content" placeholder="请添加目标"></el-input>
<el-button type="primary" round @click="add">添加</el-button>
<el-card class="box-card">
<div v-for="info,index in infolist" class="text item">
<el-row>
<el-col :span="16">
<span>{{info}}</span>
</el-col>
<el-col :span="8">
<span>
<el-button type="primary" icon="el-icon-caret-top" circle @click="up(index)"></el-button>
<el-button type="success" icon="el-icon-caret-bottom" circle @click="down(index)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="dele(index)"></el-button>
</span>
</el-col>
</el-row>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "Todolist",
data(){return {
content:'',
infolist:["学习html","学习css","学习javascript","学习语文"],
}},
methods:{
add(){
this.infolist.push(this.content);
this.content='';
},
up(index){
if (index!==0){
let tmp = this.infolist.splice(index,1)[0];
this.infolist.splice(index-1,0,tmp);
}
},
down(index){
if (index!==this.infolist.length-1) {
let tmp = this.infolist.splice(index,1)[0];
this.infolist.splice(index+1,0,tmp);
}
},
dele(index){
this.infolist.splice(index)
}
}}
</script>
<style scoped>
.list_con{
600px;
margin:50px auto 0;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
Goodslist.vue
<template>
<el-container>
<el-header class="el-dialog--center"><h1>商品展示页面</h1></el-header>
<el-main>
<el-row>
<el-col :span=16 offset=4><div class="grid-content bg-purple-dark">
<div>
<button @click="addshow=true">添加商品</button>
<button @click="goodsshow=true">显示商品</button>
<div v-show="goodsshow">
<el-table
:data="goodslist"
stripe
style=" 100%"
>
<el-table-column
type="index"
label="商品编号"
width="180">
</el-table-column>
<el-table-column
prop="title"
label="商品标题"
width="180">
</el-table-column>
<el-table-column
label="商品数量">
<template slot-scope="scope">
<el-input-number size="mini" v-model="scope.row.amount" :min="0" :max="100" label="描述文字"></el-input-number>
</template>
</el-table-column>
<el-table-column
prop="price"
label="商品单价">
</el-table-column>
<el-table-column label="商品总价">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.amount*scope.row.price }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row.id-1)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="dele(scope.row.id-1)"></el-button>
</template>
</el-table-column>
</el-table>
<i class="el-icon-money">共计:{{total}}</i>
<!-- 添加商品面板-->
<el-dialog
title="添加商品"
:visible.sync="addshow"
width="30%"
>
<span>
<p>商品id：<input type="text" v-model="tmp_obj.id"></p>
<p>商品标题：<input type="text" v-model="tmp_obj.title"></p>
<p>商品数量：<input type="text" v-model="tmp_obj.amount"></p>
<p>商品价格：<input type="text" v-model="tmp_obj.price"></p>
</span>
<span slot="footer" class="dialog-footer">
<button @click="add">保存</button>
<button @click="addshow=false">取消</button>
</span>
</el-dialog>
<!-- 编辑商品面板-->
<el-dialog
title="编辑商品"
:visible.sync="editshow"
width="30%"
>
<span>
<p>商品标题：<input type="text" v-model="tmp_obj2.title"></p>
<p>商品数量：<input type="text" v-model="tmp_obj2.amount"></p>
<p>商品价格：<input type="text" v-model="tmp_obj2.price"></p>
</span>
<span slot="footer" class="dialog-footer">
<button @click="save">保存</button>
<button @click="cancel">取消</button>
</span>
</el-dialog>
</div>
</div>
</div></el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
name: "Goodslist",
data(){return {
tmp_obj:{},
tmp_obj2:{},
tmp_index:null,
addshow:false,
editshow:false,
goodsshow:false,
goodslist:[
{'id':1,'title':'python入门','price':200,'amount':14},
{'id':2,'title':'python进阶','price':555,'amount':27},
{'id':3,'title':'python跑路','price':999,'amount':33},
]
}},
methods:{
add(){
this.goodslist.push(this.tmp_obj);
this.tmp_obj={}
this.addshow=false;
},
edit(index){
console.log(index)
this.editshow=true;
// 直接写this.tmp_obj2=this.goodslist[index]是浅拷贝，可变数据类型 原数据会跟着改变
this.tmp_obj2=JSON.parse(JSON.stringify(this.goodslist[index]))
// this.tmp_obj2.title=this.goodslist[index].title;
// this.tmp_obj2.id=this.goodslist[index].id;
// this.tmp_obj2.price=this.goodslist[index].price;
// this.tmp_obj2.mount=this.goodslist[index].mount;
this.tmp_index=index
},
save(){
this.goodslist.splice(this.tmp_index,1,this.tmp_obj2);
this.tmp_obj2={};
this.editshow=false;
},
dele(index){
this.goodslist.splice(index,1)
},
cancel(){
this.editshow=false;
this.tmp_obj={}
}
},
computed:{
total(){
let sum=0;
for (let item of this.goodslist){
console.log(item)
sum += item.price*item.amount
}
return sum
}
}
}
</script>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<router-view></router-view>
<button @click="$router.push({name:'goodslist'})">进入商品列表页面</button>
<button @click="$router.push({name:'todolist'})">进入todolist页面</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from '@/router/index'
// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Todolist from "../components/Todolist";
import Manage from "../components/Manage";
import Goodslist from "../components/Goodslist";
Vue.use(Router)
export default new Router({
mode:'history',
routes:[
{path:'/todolist',component:Todolist,name:'todolist'},
{path:'/goodslist',component:Goodslist,name:'goodslist'},
{path:'/manage',component:Manage},
]
})