第四章：Vue组件模板文件

81 阅读 0 评论 54 点赞

我是靠谱客的博主瘦瘦帅哥，最近开发中收集的这篇文章主要介绍第四章：Vue组件模板文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一步：导航模板，在menu-list.js文件中添加一栏，注意id不能与以往的冲突。

{
id: '1',
name: '用户管理',
icon: 'el-icon-document-remove',
info: '标准版的CRUD',
childList: [
{id: '1-1', name: '新增用户', icon: 'el-icon-plus', url: 'sa-view/users/users-add.vue'},
{id: '1-2', name: '修改用户', icon: 'el-icon-edit', url: 'sa-view/users/users-edit.vue'},
{id: '1-3', name: '用户列表', icon: 'el-icon-document-remove', url: 'sa-view/users/users-list.vue'},
{id: '1-4', name: '用户统计', icon: 'el-icon-pie-chart', url: 'sa-view/users/users-chart.vue'},
]
},

第二步：【新增】模板users-add.vue

<template>
<div class="vue-box" style="display: none;" :style="'display: block;'">
<!-- 参数栏 -->
<div class="c-panel">
<div class="c-title">用户添加</div>
<el-form v-if="m">
<div class="c-item br">
<label class="c-label">昵称：</label>
<el-input size="mini" v-model="m.username"></el-input>
</div>
<div class="c-item br">
<label class="c-label">密码：</label>
<el-input size="mini" v-model="m.password"></el-input>
</div>
<div class="c-item br">
<label class="c-label">手机：</label>
<el-input size="mini" v-model="m.phone"></el-input>
</div>
<div class="c-item br">
<label class="c-label">角色：</label>
<el-select size="mini" v-model="m.role_id">
<el-option label="管理员" :value="1"></el-option>
<el-option label="公告管理员" :value="2"></el-option>
<el-option label="普通用户" :value="3"></el-option>
</el-select>
</div>
<div class="c-item br">
<label class="c-label">性别：</label>
<el-radio-group size="mini" v-model="m.sex" size="mini">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</div>
<div class="c-item br">
<label class="c-label"></label>
<el-button size="mini" type="primary" icon="el-icon-plus" size="mini" @click="ok">确定</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
//这里要使用module.exports，而不是export default
module.exports = {
components: {
//无论是在html还是vue组件中，引入子组件都要使用httpVueLoader的形式。
"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
},
//这里要使用函数的方式，而不是JSON
data: function () {
return {
m:{
username:"",
password:"",
phone:"",
role_id:"",
sex:"",
}
}
},
methods: {
ok: function () {
sa.alert(JSON.stringify(this.m))
}
}
}
</script>
<style scoped>
</style>

第三步：【列表】模板users-list.vue

<template>
<div class="vue-box" style="display: none;" :style="'display: block;'">
<div class="c-panel">
<!-- ------------- 检索参数 ------------- -->
<div class="c-title">用户列表</div>
<el-form>
<div class="c-item">
<label class="c-label">用户昵称：</label>
<el-input size="mini" v-model="p.username" placeholder="模糊查询"></el-input>
</div>
<div class="c-item">
<label class="c-label">注册日期：</label>
<el-date-picker size="mini" v-model="p.start_time" type="date" value-format="yyyy-MM-dd"
placeholder="开始日期"></el-date-picker>
-
<el-date-picker size="mini" v-model="p.end_time" type="date" value-format="yyyy-MM-dd"
placeholder="结束日期"></el-date-picker>
</div>
<div class="c-item" style="min-width: 0px;">
<el-button size="mini" type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询
</el-button>
</div>
<br/>
<!-- ------------- 排序参数 ------------- -->
<div class="c-item s-radio-text">
<label class="c-label">综合排序：</label>
<el-radio-group size="mini" v-model="p.sortType">
<el-radio :label="1">注册时间</el-radio>
<el-radio :label="2">最近登录</el-radio>
<el-radio :label="3">登陆次数</el-radio>
<el-radio :label="4">最近签到</el-radio>
<el-radio :label="5">签到次数</el-radio>
</el-radio-group>
</div>
</el-form>
<!-- ------------- 快捷按钮 ------------- -->
<div class="fast-btn">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
<el-button size="mini" type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteByIds()">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-download" @click="sa.exportExcel()">导出</el-button>
<el-button size="mini" type="info" icon="el-icon-refresh" @click="sa.f5()">重置</el-button>
</div>
<!-- ------------- 数据列表 ------------- -->
<el-table class="data-table" ref="data-table" :data="dataList" size="small">
<el-table-column type="selection" width="45px"></el-table-column>
<el-table-column label="编号" prop="id" width="80px"></el-table-column>
<el-table-column label="昵称" prop="username" width="220px">
<template slot-scope="s">
<img :src="s.row.avatar" @click="sa.showImage(s.row.avatar, '400px', '400px')"
style="width: 3em; height: 3em; float: left; margin-right: 1em; border-radius: 50%; cursor: pointer;">
<div style="float: left; width: 130px; line-height: 20px;">
<b>{{s.row.username}}</b>
<p>{{s.row.tell}}</p>
</div>
</template>
</el-table-column>
<el-table-column label="个人相册">
<template slot-scope="s">
<img :src="s.row.photo_list[0]" style="width: 40px; height: 40px; cursor: pointer;"
@click="sa.showImageList(s.row.photo_list)">
共{{s.row.photo_list.length}}张, 点击预览
</template>
</el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="注册方式" prop="create_type"></el-table-column>
<el-table-column label="注册于" prop="create_time"></el-table-column>
<el-table-column label="状态">
<template slot-scope="s">
<el-switch v-model="s.row.status" :active-value="1" :inactive-value="2"
inactive-color="#ff4949"></el-switch>
<b style="color: green;" v-if="s.row.status == 1">正常</b>
<b style="color: red;" v-if="s.row.status == 2">禁用</b>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="s">
<el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">详情</el-button>
<el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- ------------- 分页 ------------- -->
<div class="page-box">
<el-pagination background
layout="total, prev, pager, next, sizes, jumper"
:current-page.sync="p.pageNo"
:page-size.sync="p.pageSize"
:total="dataCount"
:page-sizes="[1, 10, 20, 30, 40, 50, 100]"
@current-change="f5(true)"
@size-change="f5(true)">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
//这里要使用module.exports，而不是export default
module.exports = {
components: {
//无论是在html还是vue组件中，引入子组件都要使用httpVueLoader的形式。
"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
},
//这里要使用函数的方式，而不是JSON
data: function () {
return {
p: {	// 查询参数
username: '',
create_type: 0,
sortType: 1,
start_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-1',	// 本月一号
end_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),	// 本月当日
pageNo: 1,
pageSize: 10,
},
dataCount: 1422,
dataList: []
}
},
methods: {
// 数据刷新
f5: function () {
//这里发送ajax请求获取数据进行填充 TODO
this.dataList = [{
"id": 12001,
"username": "省长",
"avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/2.png?x-oss-process=style/yasuo",
"tell": '这人懒，啥也没有留下',
"sex": "男",
"photo_list": [
"http://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/1549112799839261454077.jpeg?x-oss-process=style/yasuo"
],
"create_type": "账号注册",
"create_time": "2019-02-09 20:22:00",
"status": 1
}];	// 数据
this.dataCount = 1000;
// 分页
sa.f5TableHeight();
// 刷新表格高度
},
//详情
get: function (data) {
sa.alert(JSON.stringify(data))
},
// 删除
del: function (data) {
sa.confirm('是否删除，此操作不可撤销', function () {
//发送ajax请求 TODO
sa.ok('删除成功');
sa.f5TableHeight();
// 刷新表格高度
}.bind(this));
},
//新增
add: function (data) {
//跳转到指定菜单
this.sa_admin.showMenuById("1-1")
},
//查看-根据选中的
getBySelect: function (data) {
var selection = this.$refs['data-table'].selection;
if (selection.length === 0) {
return sa.msg('请选择一条数据')
}
sa.alert(JSON.stringify(selection[0]))
},
// 批量删除
deleteByIds: function() {
// 获取选中元素的id列表
let selection = this.$refs['data-table'].selection;
let ids = sa.getArrayField(selection, 'id');
if(selection.length == 0) {
return sa.msg('请至少选择一条数据')
}
// 提交删除
sa.confirm('是否批量删除选中数据？此操作不可撤销', function() {
//发送ajax请求删除：参数{ids: ids.join(',')}
TODO
sa.ok('删除成功');
sa.f5TableHeight();
// 刷新表格高度
}.bind(this));
},
},
created: function () {
this.f5();
sa.onInputEnter();//监听输入框的回车事件，执行查询
}
}
</script>
<style scoped>
</style>