APP.vue
<template>
<div id="app">
<!-- 调用路由组件：路由组件的作用：识别访问当前站点的URL地址，获取地址的路径部分，到路由列表中进行识别判断-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</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"
Vue.config.productionTip = false
// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);
//
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 挂载路由对象，将来所有的路由对象的属性或者方法，都可以通过vm对象来操作
components: { App },
template: '<App/>'
})
// 这里是不能编写任何JS代码的，因为系统不会执行这里来
index.js
import Vue from "vue"
import Router from "vue-router"
// 注册路由组组件
Vue.use(Router)
// 导入组件
// import Home from "../components/Home"
// 在vue中 @表示src目录的路径
import User from "../components/User";
import Home from "../components/Home";
import Login from "../components/Login";
import Register from "../components/Register";
import Goods from "../components/Goods";
import ToDoList from "../components/ToDoList";
// 实例化路由对象，编写路由列表
export default new Router({
mode: "history", // 路由显示模式，默认hash，地址栏上面默认的带#，history不会带#
routes: [ // 路由列表
{
path: "/home", // 访问URL地址
component: Home, // 访问URL地址对应的组件
name: "Home", // 访问URL的路由别名 ，字符串格式
},
{
path: "/goods",
component: Goods,
name: "Goods",
},
{
path: "/todolist", // 表示路由参数接收的2个参数名
component: ToDoList,
name: "ToDoList",
}
]
})
ToDoList.vue
<template>
<div id="todolist" class="list_con">
<el-button @click="jump" type="warning">Goods</el-button>
<h2>To do list</h2>
<el-row :gutter="20">
<el-col :span="20">
<div class="grid-content bg-purple">
<el-input v-model="message" size="medium"></el-input>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-purple-light">
<el-button @click="addItem" type="primary" size="medium">增加</el-button>
</div>
</el-col>
</el-row>
<ul id="list" class="list">
<li v-for="(item, key) in dolist">
<span>{{item}}</span>
<a @click="upItem(key)" class="el-icon-top"></a>
<a @click="downItem(key)" class="el-icon-bottom"></a>
<a @click="delItem(key)" class="el-icon-delete"></a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "ToDoList",
data: function () {
return{
message:"",
dolist:[
"There there is a will, there is a way",
"A man is as old as he feels",
"Union is strength",
"No pain, no gain",
"Stand out or get out",
]
}
},
methods:{
addItem(){
if(this.messsage==""){
return false;
}
this.dolist.push(this.message);
this.message = ""
},
delItem(key){
this.dolist.splice(key, 1);
},
upItem(key){
if(key==0){
return false;
}
let result = this.dolist.splice(key,1);
this.dolist.splice(key-1,0,result[0]);
},
downItem(key){
let result = this.dolist.splice(key, 1);
this.dolist.splice(key+1,0,result[0]);
},
jump(){
this.$router.push("/goods")
},
}
}
</script>
<style scoped>
.list_con{
width:600px;
margin:50px auto 0;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
display: block;
height: 30px;
margin-top: 10px;
line-height: 30px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
margin-top: 10px;
}
a:hover{
cursor: pointer;
}
</style>
Goods.vue
<template>
<div id="goods">
<el-button @click="jump" type="warning">ToDoList</el-button>
<el-button @click="change" type="primary">添加商品</el-button>
<br><br>
<h1 style="left: 1000px !important;">商品列表</h1>
<el-table :data="goods_list" :summary-method="getSummaries"
show-summary border style="width: 800px" :row-class-name="tableRowClassName">
<el-table-column label="商品id">
<template slot-scope="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column prop="name" label="商品标题"></el-table-column>
<el-table-column prop="num" label="商品数量">
<template slot-scope="scope">
<el-input-number v-model="scope.row.num" @change="issub(scope.$index)" size="mini" :min="0"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope" >
<el-button type="success plain" size="small" @click="edit(scope.$index)">编辑</el-button>
<el-button type="danger plain" size="small" @click="del(scope.$index)" >删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="box" :class="mycls">
<el-form class="demo-ruleForm" label-width="100px">
<el-input type="text" v-model="goods_info.title" placeholder="商品标题"></el-input>
<br><br>
<el-input type="text" v-model="goods_info.num" placeholder="商品数量"></el-input>
<br><br>
<el-input type="text" v-model="goods_info.price" placeholder="商品价格"></el-input>
<br><br>
<el-button type="primary" @click="add()">保存</el-button>
<el-button type="danger" @click="cancle">取消</el-button>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "Goods",
data: function () {
return {
mycls:{
show_hide: true,
},
goods_info:{
id: -1,
title: '',
num: '',
price: '',
},
goods_list:[
{"name":"python入门","num":10,"price":150},
{"name":"python进阶","num":20,"price":100},
{"name":"python高级","num":30,"price":75},
{"name":"python研究","num":40,"price":60},
{"name":"python放弃","num":50,"price":10},
],
}
},
methods:{
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 == 1) {
return 'odd_bgcolor';
} else {
return 'even_bgcolor';
}
},
change(){
if (this.mycls.show_hide){
this.mycls.show_hide = false
}
},
add(){
if (this.goods_info.title === '' || this.goods_info.num === '' || this.goods_info.price === ''
|| isNaN(parseFloat(this.goods_info.price)) || isNaN(parseInt(this.goods_info.num))
|| parseFloat(this.goods_info.price) < 0 || parseInt(this.goods_info.num) < 0){
return alert('请将信息填写完整！')
}
let name = this.goods_info.title;
let num = parseInt(this.goods_info.num);
let price = parseFloat(this.goods_info.price).toFixed(2);
if (this.goods_info.id !== -1){
let obj = this.goods_list[this.goods_info.id];
obj.name = name;
obj.num = num;
obj.price = price;
}else{
let obj = {
'name': name,
'num': num,
'price': price,
};
this.goods_list.push(obj);
}
this.cancle()
},
del(index){
this.goods_list.splice(index, 1)
},
cancle(){
this.mycls.show_hide = true;
this.goods_info.id = -1;
this.goods_info.title = '';
this.goods_info.num = '';
this.goods_info.price = '';
},
edit(index){
this.mycls.show_hide = false;
let res = this.goods_list[index];
this.goods_info.title = res.name;
this.goods_info.num = res.num;
this.goods_info.price = res.price;
this.goods_info.id = index;
},
issub(index){
if( this.goods_list[index].num === 0 ){
this.del(index)
}
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
let tmp = 0;
for(let obj of data){
tmp = tmp + obj.num * obj.price
}
sums[1] = tmp.toFixed(2) + '￥'
});
return sums;
},
jump(){
this.$router.push("/todolist")
},
},
}
</script>
<style scoped>
#goods{
margin:100px 20%;
text-align: center !important;
}
#goods .box{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #eee;
width: 280px;
height: 240px;
padding: 40px 80px;
z-index: 10;
}
.show_hide{
display: none;
}
.el-table .odd_bgcolor{
background: blue;
}
.el-table .even_bgcolor{
background: orange;
}
.cell{
text-align: center !important;
}
.box{
margin-top: 243px !important;
margin-left: 1200px !important;
}
.x-title{
left: 500px !important;
}
</style>