Element 美化 Todo 项目

发布时间：2023-04-19 10:24:09 所属栏目：教程来源：

导读：Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

编写路由

首先，我们需要定义两个路由，分别是待办事项列表页面和添加待办事项页面。我们

Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

编写路由

首先，我们需要定义两个路由，分别是待办事项列表页面和添加待办事项页面。我们可以打开 ‘router/index.js’ 文件进行如下配置：

import Vue from "vue";
import VueRouter from "vue-router";
import List from "../views/List.vue";
import Add from "../views/Add.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/list",
name: "list",
component: List,
alias: "/"
},
{
path: "/add",
name: "home",
component: Add
}
];
const router = new VueRouter({
routes
});
export default router;

入口文件

要使用 Element 首先我们需要通过 npm 安装 Element：

npm install element-ui --save
安装完成之后，我们需要修改 main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

创建 mutation-types (store/types.js)

export const INIT_Todo = "INIT_Todo";
export const ADD_Todo = "ADD_Todo";
export const DEL_Todo = "DEL_Todo";
export const COMPLETE_Todo = "COMPLETE_Todo";

创建 store (store/index.js)

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
import { ADD_Todo, DEL_Todo, COMPLETE_Todo, INIT_Todo } from "./types";
export default new Vuex.Store({
state: {
list: []
},
getters: {
count: state => isComplete => {
return state.list.filter(item => item.isComplete === isComplete).length;
},
todoList: state => {
return state.list;
}
},
mutations: {
[INIT_Todo](state, payload) {
state.list = payload.list;
},
[ADD_Todo](state, payload) {
state.list.push(payload);
},
[DEL_Todo](state, payload) {
const index = payload.index;
state.list.splice(index, );
},
[COMPLETE_Todo](state, payload) {
const index = payload.index;
state.list[index].isComplete = ;
}
},
actions: {
initList({ commit }) {
axios.get("/todo/list").then(res => {
commit(INIT_Todo, { list: res.data.data });
});
}
}
});

改造 App.vue

<template>
<div id="app">
<el-container style="height: 100%; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu router>
<el-menu-item index="/list">
<i class="el-icon-menu"></i>
<span slot="title">待办列表</span>
</el-menu-item>
<el-menu-item index="/add">
<i class="el-icon-circle-plus-outline"></i>
<span slot="title">添加待办</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "App",
components: {},
methods: {
...mapActions(["initList"])
},
created() {
this.initList();
}
};
</script>
<style lang="scss">
* {
padding: 0;
margin: 0;
}
#app {
height: 100%;
}
</style>

编写列表页面（views/list.vue）

<template>
<div>
<el-table
class="el-table"
:data="todoList"
border
style="width: 100%"
:row-class-name="tableRowClassName"
>
<el-table-column fixed prop="name" label="事项名称" width="150">
</el-table-column>
<el-table-column prop="date" label="事项截止时间" width="120">
</el-table-column>
<el-table-column prop="type" label="事项类型" width="120">
</el-table-column>
<el-table-column prop="urgent" label="是否紧急" width="120">
<template slot-scope="scope">
<span>{{ scope.row.urgent | urgentText }}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="事项详情"></el-table-column>
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button
@click="handleDelete(scope.$index)"
type="danger"
size="small"
>删除</el-button
>
<el-button
type="primary"
size="small"
@click="handleComplete(scope.$index)"
:disabled="scope.row.isComplete === 1"
>完成</el-button
>
</template>
</el-table-column>
</el-table>
<div style="text-align:left">
总共：{{ todoList.length }} 个任务。已完成：{{
count(1)
}}
个任务。未完成：{{ count(0) }} 个任务。
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import { COMPLETE_Todo, DEL_Todo } from "../store/types";
export default {
methods: {
...mapMutations([COMPLETE_Todo, DEL_Todo]),
handleDelete(index) {
this.DEL_Todo({ index });
},
handleComplete(index) {
this.COMPLETE_Todo({ index });
},
tableRowClassName({ row }) {
if (row.isComplete === 1) {
return "complete-row";
}
return "";
}
},
computed: {
...mapGetters(["todoList", "count"])
},
filters: {
urgentText(value) {
if (value === 0) {
return "紧急";
}
return "非紧急";
}
},
data() {
return {
tableData: []
};
}
};
</script>
<style>
.el-table .complete-row {
background: #f0f9eb;
}
</style>

编写添加事项页面

<template>
<el-form ref="form" :model="form" :rules="rules" label-width="180px">
<el-form-item prop="name" label="事项名称：">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="date" label="事项截止时间：">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date"
value-format="yyyy-MM-dd"
style="width: 100%;"
></el-date-picker>
</el-form-item>
<el-form-item prop="type" label="事项类型：">
<el-select
v-model="form.type"
placeholder="请选择活动区域"
style="width: 100%;"
>
<el-option label="学习" value="学习"></el-option>
<el-option label="工作" value="工作"></el-option>
<el-option label="游戏" value="游戏"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="urgent" label="是否紧急：">
<el-radio-group v-model="form.urgent">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="content" label="事项详情：">
<el-input type="textarea" v-model="form.content"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { mapMutations } from "vuex";
import { ADD_Todo } from "../store/types";
export default {
data() {
return {
form: {
name: "",
content: "",
date: "",
urgent: 1,
type: ""
},
rules: {
name: [
{ type: "string", required: true, message: "请填写待办事项的名称" }
],
content: [
{
type: "string",
required: true,
message: "请填写待办事项的详情",
trigger: "blur"
},
{
type: "string",
min: 20,
max: 50,
message: "长度限制在20-50个字符",
trigger: "blur"
}
],
type: [
{ type: "string", required: true, message: "请填写待办事项的称类型" }
]
}
};
},
methods: {
...mapMutations([ADD_Todo]),
onSubmit() {
this.$refs.form.validate(validate => {
if (validate) {
this.ADD_Todo({ ...this.form, isComplete: 0 });
this.$message({
message: "添加成功",
type: "success"
});
this.$refs.form.resetFields();
}
});
},
cancel() {
this.$refs.form.resetFields();
}
}
};
</script>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!