这两个星期一直在做一个后台管理系统, 原本是用的 boot+jq, 先新增页面用 element+vue, 那么开始挖坑填坑来了, 防止以后忘记, 现还是记录下来
1,element 的日期选择器
通过选择日期来查询表格数据, 传的日期格式后台要求是 yyyy-MM-dd, 解决方法:
使用 change 事件 说明: 当 input 的值改变时触发, 返回值和文本框一致 回调参数: 格式化后的值
javascript 代码
- <el-date-picker type="date" @change="dateChange" placeholder="请选择执行日期" size="small">
- </el-date-picker>
- dateChange: function (val) {
- this.choosedDate = val;//this.choosedDate 用来存和传格式化的值
- return val;
- },
2, 搜索条件后点击 enter 查询数据, 使用 @keyup.enter.native, 每次 enter 都会刷新整个页面, 因为用的是 form, 需要在 enter 的时候阻止表单提交, 则 form 加上 onsubmit="return false"
html 代码
- <el-form :inline="true" class="demo-form-inline searchForm" onsubmit="return false">
- <el-form-item class="searchOpe">
- <el-input placeholder="请输入操作员姓名或手机号" v-model.trim="operator" size="small" @keyup.enter.native="find">
- <el-button slot="append" icon="search" type="primary" size="small" @click="find"></el-button>
- </el-input>
- </el-form-item>
- </el-form>
3,element 组件里有些是限制了类型的, 比如 tab,radio,CheckBox 的属性 label,name 都是字符串类型
javascript 代码
- <el-tabs v-model="leftTab" @tab-click="leftTabClick">
- <el-tab-pane label="全部" name="0"></el-tab-pane>
- <el-tab-pane label="紧急" name="1"></el-tab-pane>
- <el-tab-pane label="操作员稀缺区域" name="2">
- </el-tabs>
- leftTabClick: function (tab) {
- this.leftTab="0";// 赋值的必须是字符串
- var response = {};
- if (this.leftTab == 0) {// 进行比较可以是字符也可以是整型
- response.TaskType = 0;
- }
- }
- leftTab: '0',// 在 data 里面定义也是字符串, 与 name 类型一致
4, 后台返回的值是数字, 需要用过滤器来显示文字
javascript 代码
- <div class="tagSatatus">
- <el-tag :type="scope.row.IsUrgency == 1 ?'danger':'del'" close-transition>{{scope.row.IsUrgency | word_Str}}</el-tag>
- <el-tag :type="scope.row.IsScarcity == 0 ?'warning':'del'" close-transition>{{scope.row.IsScarcity | word_Str}}</el-tag>
- </div>
- filters: {
- word_Str: function (value) {
- if (value == "1") {
- return "急"
- } else if (value == "0") {
- return "缺"
- }
- }
- },
5, 一些小问题
html 代码
- <!-- 时间不显示秒, 进行了截取 -->
- <p > 执行时间:{{scope.row.ExecutionDate.substring(0,16)}}</p>
- <!-- 特殊信息不为空才显示 -->
- <p v-if="scope.row.Remark !=''"> 特殊信息:{{scope.row.Remark}}</p>
- <!-- 评分要四舍五入且保留一位小数点 -->
- <p > 综合评分:{{scope.row.Score.toFixed(1)}}</p>
6, 在页面用 element 的弹窗, 但是点击遮罩和右上角的叉叉一直没有效果, 不知是不是和 boot 共用被影响, 最终还是用的 boot 的弹窗.
在弹窗里面引用另一个页面的内容, 用的 iframe, 传入地址参数
javascript 代码
- <!-- 日程弹窗 -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
- <h4 class="modal-title" id="myModalLabel"> 灰色: 不可执行任务, 绿色: 半天可执行任务, 蓝色: 任务目标对象, 紫色: 当前任务执行日期 </h4>
- </div>
- <div class="modal-body">
- <iframe :src="this.calenURL" scrolling="no" frameborder="0" width="650" height="510"></iframe>
- </div>
- </div>
- </div>
- </div>
- this.calenURL = '../Scripts/fulldate/index.html?userCode=' + row.UserCode + '&executeDate=' + this.ExecutionDate;
7, 点击不同的 tab 页请求的同一个接口, 但传入的不同的参数, 通过判断把参数传给一个新建的对象, 避免代码冗余
javascript 代码
- if (data.body.Data.length> 0) {
- var response = {};
- if (this.activeName == 0) {// 申领人
- response.taskCode = this.curRow.TaskCode;
- response.type = 0;
- } else if (this.activeName == 1) {
- response.PrvinceCode = this.my.Data[0].ProvinceCode;
- response.CityCode = this.my.Data[0].CityCode;
- response.type = 1;
- }
- this.$http.post("/task/GetOperatorList", response).then(function (data) {
- $("#loadingScreenLocker,#loadingLayer").fadeOut();// 遮罩消失
- this.GetOperatorList = data.body;
- this.currentPage = 1;
- });
- }
8, 表单验证
javascript 代码
- <el-form ref="form" :model="form" :rules="rules" label-width="60px" class="addForm">
- <el-form-item label="手机号" prop="mphone">
- <el-input v-model="form.mphone" size="small" placeholder="请输入手机号"></el-input>
- </el-form-item>
- <el-form-item label="姓名" prop="mname">
- <el-input v-model="form.mname" size="small" placeholder="请输入姓名"></el-input>
- </el-form-item>
- <el-form-item label="地址" prop="selectedOptions">
- <el-cascader placeholder="输入区: 可匹配省 / 市"
- size="small"
- :options="options1"
- v-model="form.selectedOptions"
- filterable>
- </el-cascader>
- </el-form-item>
- <el-form-item label="" prop="mdetail">
- <el-input v-model="form.mdetail" size="small" placeholder="请输入详细地址"></el-input>
- </el-form-item>
- <el-form-item label="QQ" prop="mqq">
- <el-input v-model="form.mqq" size="small" placeholder="QQ"></el-input>
- </el-form-item>
- <el-form-item label=" ">
- <el-button type="primary" size="small" @@click="adOp"> 添加操作员 </el-button>
- </el-form-item>
- </el-form>
- rules: {
- mphone: [
- { required: true, message: '请输入手机号', trigger: 'blur' },
- { pattern: /^1[34578]\d{9}$/, message: '格式不正确', trigger: 'blur' }
- ],
- mname: [
- { required: true, message: '请输入姓名', trigger: 'blur' },
- ],
- selectedOptions: [
- { type: 'array', required: true, message: '请选择省', trigger: 'change' }
- ],
- mdetail: [
- { required: true, message: '请输入详细地址', trigger: 'blur' },
- ],
- mqq: [
- { required: true, message: '请输入 QQ', trigger: 'blur' }
- ]
- }
- adOp: function (form) {
- this.$refs['form'].validate((valid) => {
- if (valid) {
- // 验证通过后执行的代码
- } else {
- return false;
- }
- });
- },
9, 数组去重
javascript 代码
- unique: function (arr) {
- var result = [], isRepeated;
- for (var i = 0; i <arr.length; i++) {
- isRepeated = false;
- for (var j = 0; j < result.length; j++) {
- if (arr[i].Id == result[j].Id) {
- isRepeated = true;
- break;
- }
- }
- if (!isRepeated) {
- result.push(arr[i]);
- }
- }
- return result;
- },
10, 最最让我头疼的 element 表格与复选框一起使用的时候需要做的事情, 内心崩溃了, 果然还是逻辑差. 最后经理出马解决, 万分崇拜
点击复选框选中和取消, 点击全选选中和取消, 只要不取消无论在哪一页都要保持选中状态, 直接上代码. 到现在还是有点晕乎乎的, 还要对 vue.js 和原生 js 再去多学习
javascript 代码
- // 点击右边单个的复选框
- handleSelectionChange: function (val, row) {
- // 判断是否选中
- var checked = val.indexOf(row) != -1;
- if (checked) {
- // 选中时, 添加到选中的数组中
- this.amountlSelection = this.amountlSelection.concat(row);
- }
- else {
- // 过滤掉反选的行
- this.amountlSelection = this.amountlSelection.filter(t => t.Id != row.Id)
- }
- this.amountlSelection = this.unique(this.amountlSelection);
- },
- // 点击全选
- selectAll: function (val) {
- // 通过选中值的长度判断是全选中还是全反选
- if (val.length == 0) {
- // 当反选时, 清除选中数组中的数据
- for (var i = 0; i <this.GetOperatorList.Data.length; i++) {
- this.amountlSelection = this.amountlSelection.filter(t => t.Id != this.GetOperatorList.Data[i].Id)
- }
- } else {
- // 当选中时, 添加到选中数组中
- this.amountlSelection = this.amountlSelection.concat(val);
- }
- // 清除重复选项
- this.amountlSelection = this.unique(this.amountlSelection);
- },
- // 保持复选框勾选状态
- checked: function () {
- this.$refs.table.clearSelection();
- vm.GetOperatorList.Data.forEach(row => {
- for (var i = 0; i < this.amountlSelection.length; i++) {
- if (row.Id == this.amountlSelection[i].Id) {
- this.$refs.table.toggleRowSelection(row);
- }
- }
- });
- },
最后说说编辑器吧, 用的 VS2017, 这还是在大学时候用过, 现在重新用还真有点不习惯, 不过过了一天就好了.
总的来说, 还是磕磕绊绊的完成了, 也更加认识到自己的不足, 写出来不是最重要的, 重要的是要能想明白这是为什么, 能够理解原理.
来源: http://www.qdfuns.com/article/17567/5167c885fd9e3a2082837c64dabe3c62.html