wordpress文档内容页,wordpress导航如何优化,网站建设方案书阿里云模板,懂做网站怎么赚钱一. 案例
校验金额 阐述#xff1a;校验输入的金额是否正确。如下所示#xff0c;点击【编辑图标】会变为input输入框当#xff0c;输入金额。当输入框失去焦点时#xff0c;若正确则调用接口更新金额且变为不可输入状态#xff0c;否则返回不合法金额提示
templat…一. 案例
校验金额 阐述校验输入的金额是否正确。如下所示点击【编辑图标】会变为input输入框当输入金额。当输入框失去焦点时若正确则调用接口更新金额且变为不可输入状态否则返回不合法金额提示
templateel-table v-loadingtableLoading :datadataList row-keyid cell-clickcellClick :row-class-nametableRowClassName :cell-class-nametableCellClassNameel-table-column show-overflow-tooltip label额度(元)template slot-scopescopeel-tooltip effectdark :contentscope.row.amt 0 ? 已设置无法更改 : 点击输入金额 placementtopdiv v-ifscope.row.index rowIndex scope.column.index columnIndexel-input refeditInput v-modelscope.row.amt blurinputBlur(scope.row) sizemini placeholder输入额度 clearable/el-input/divdiv v-elsespan {{ scope.row.amt| parseFormatNum }} 元 /spanspan v-showscope.row.amt 0i stylecolor:#409eff classel-icon-edit/i/span/divel-tooltip/template/el-table-column/el-table
/templatescript
// 此处引入金额转换后的格式引入的js文件放于文末
import { parseFormatNum } from /utils/index;
// 此处引入接口更新对应金额
import {updateAmt} from api/xxxexport default {data() {return {rowIndex: -1, // 行索引columnIndex: -1, // 列索引 tableLoading:false, dataList:[], query:{pageSize:10,pageNum:1},totalSize:0,validAmt:null, // 校验金额符合 true ; 不符合 false}},mounted() {this.fetchData()},filters: {parseFormatNum(number) {return parseFormatNum(number);},},methods: {/***初始化列表数据/fetchData(){this.tableLoading truegetList(this.query).then(res{this.tableLoading falsethis.dataList res.data.listthis.totalSize res.data.total})},/*** 把每一行的索引加到行数据中*/tableRowClassName({ row, rowIndex }) {row.index rowIndex},/*** 把每一列的索引加到列数据中*/tableCellClassName({ column, columnIndex }) {column.index columnIndex},/*** 单元格被点击时会触发该事件*/cellClick(row, column) {if (column.label 额度(元) row.cancelVerificationLimit 0) {this.rowIndex row.indexthis.columnIndex column.indexthis.$nextTick(() {this.$refs[editInput].focus()//没有自动聚焦效果的话可能是这里出现问题 需要打印出来看一下})}},/*** 修改供应商免核销额度并校验金额*/inputBlur(row) {const reg /^[0-9,.]{1,20}$/this.validAmt reg.test(row.cancelVerificationLimit)if (this.validAmt row.cancelVerificationLimit 0) {// 传一个主键id以及输入额度即可updateAmt(row.id, row.amt).then(res {if (res.success) {this.$notify.success({title: this.$t(message.success),message: res.message});this.rowIndex -1this.columnIndex -1this.validAmt false}})} else {this.validAmt falserow.amt 0this.$message.error(请输入正确格式的金额)return}},},}
/script
校验时间 阐述选择的时间是否小于当前时间若是则选择后立即禁用
templatetable v-loadingtableLoading :datadataList row-keyid el-table-column alignleft proptime label时间template #default{ row }el-tooltip classitem effectdark :contentfittleTime(row.time)? 已经启用 无法更改: 点击修改 placementtopel-date-picker v-modelrow.time changeupdateTime(row):disabledfittleTime(row.time) :picker-optionspickerOptions value-formatyyyy-MM-ddsizemini stylewidth: 150px typedate placeholder选择日期时间/el-date-picker/el-tooltip/template/el-table-column/table
/templatescript
// 引入对应接口
import {updateTime} from /api/xxx
export default{data(){return{tableLoading:false,dataList:[],query:{pageSize:10,pageNum:1},pickerOptions: {disabledDate(time) {return time.getTime() Date.now();}},}},mounted() {this.fetchData()},methods: {/***初始化列表数据/fetchData(){this.tableLoading truegetList(this.query).then(res{this.tableLoading falsethis.dataList res.data.listthis.totalSize res.data.total})},/*** 判断是否禁用虚拟记账薄启用时间* param {Date} time */fittleTime(time) {if (time ! null) {let dbTime new Date(time);let nowTime new Date();return dbTime nowTime;}},/*** 修改供应商虚拟机账簿启用时间*/updateTime(row) {if (!row.time) return this.$message.error(请选择启用时间);updateTime(row.id, row.time).then(res {this.$message({type: res.code 200 ? success : error,message: res.message});});},}
}
/script校验不同层级所输入的内容 阐述当一级下 无 二级子目录时就可直接添加表若有允许先添加材料再通过二级子目录添加表
templateel-card// 表头el-row classcatelog-header :gutter20 :span24el-col v-foritem in catelogHeaderList :keyitem.id classcatelog-sub-header :spanitem.span{{ item.title }}/el-col/el-row!--表单校验--el-row stylemargin-left: -10px; margin-right: -10pxel-formrefcatelogSettingFormclassdescriptions-forminline-message:modelcatelogUserForm:rulescatalogCollectionRules!-- 一级目录 --el-rowv-for(item, index) in catelogUserForm.catelogSysList:keyitem.idclasscatelog-form-borderel-row classcatelog-align catelog-borderel-col :span1 stylemargin-left: 10px{{ (index 1) | numberFilter }}/el-colel-col classcatelog-item-font :span7{{ item.catamanageName }}// 判断是否添加材料如图所示的 el-buttonv-show(item.code ARCHIVE_PERSON item.children.length 0) ||(item.children.length 0 item.children[0].code ARCHIVE_TABLE)sizeministylemargin-left: 10pxtypetextclickhandleAddCatelogUser(item)vab-iconiconadd-circle-fillstylefont-size: 18px !important//el-button/el-col/el-row!-- 二级目录 --vab-draggable:data-id${item.id}v-binddragOptions:disableddisabledDrag:group{put: false,}:listitem.childrenendonEndel-rowv-for(childrenItem, childrenIndex) in item.children:keychildrenIndexclasschildren-itemel-rowv-ifchildrenItem.code ARCHIVE_PERSONclasscatelog-align:gutter30el-col:span1stylefont-size: xx-small; margin-left: 10pxdiv v-ifchildrenItem.code ARCHIVE_PERSON{{ index 1 }} - {{ childrenIndex 1 }}/divdiv v-else{{ childrenIndex 1 }}/div/el-colel-col classcatelog-table-border :span7el-form-item{{ childrenItem.catamanageName }}el-buttonsizeministylemargin-left: 10pxtypetextclickhandleAddCatelogUser(childrenItem)vab-iconiconadd-circle-fillstylefont-size: 18px !important//el-button/el-form-item/el-col/el-rowdiv v-else stylecursor: moveel-row classcatelog-align :gutter30el-col:span1stylefont-size: xx-small; margin-left: 10pxdiv v-ifchildrenItem.code ARCHIVE_PERSON{{ index 1 }} - {{ childrenIndex 1 }}/divdiv v-else{{ childrenIndex 1 }}/div/el-colel-col classcatelog-table-border :span5el-form-item{{ childrenItem.name }}/el-form-item/el-colel-col :span5el-form-item:propcatelogSysList[${index}].children[${childrenIndex}].catamanageName:rules{required: true,message: 材料名称不能为空,trigger: change,}el-inputv-modelchildrenItem.catamanageNameclearableplaceholder请输入材料名称//el-form-item/el-colel-col :span3el-form-item:propcatelogSysList[${index}].children[${childrenIndex}].treeFormationTime:rules{required: true,message: 请使用 - 分割年月日分,pattern:/(^[1-2][0-9][0-9][0-9]-([1][0-2]|0?[1-9])-([12][0-9]|3[01]|0?[1-9])$)|(^[1-2][0-9][0-9][0-9]-([1][0-2]|0?[1-9])$)|(^[1-2][0-9][0-9][0-9]$)/,trigger: change,}el-inputv-modelchildrenItem.treeFormationTimeclearableplaceholder示例2023-01-01//el-form-item/el-colel-col :span2el-form-item:propcatelogSysList[${index}].children[${childrenIndex}].pagesNum:rules[{required: true,message: 页数不能为空,pattern: /^[1-9]\d*$/,trigger: change,},]el-inputv-modelchildrenItem.pagesNumclearableplaceholder页数//el-form-item/el-colel-col :span6el-form-itemel-inputv-modelchildrenItem.remarkclearableplaceholder请输入备注//el-form-item/el-colel-col :span2 styletext-align: centerel-form-itemel-buttoniconel-icon-viewtypetextclickhandleDelete(index,childrenItem,childrenIndex,del)删除/el-button/el-form-item/el-col/el-row/div!-- 三级目录 --vab-draggablev-binddragOptions:data-id${childrenItem.id - childrenItem.parentId}:listchildrenItem.childrenendonEndel-rowv-for(innerItem, innerIndex) in childrenItem.children:keyinnerItem.idclasscatelog-align:gutter30stylecursor: move; border-top: 1px solid #8eaac6el-col:span1stylefont-size: xx-small; margin-left: 10pxdiv{{ innerIndex 1 }}/div/el-colel-col:span5styleborder-left: 1px solid #8eaac6;padding-left: 10px !important;el-form-item stylepadding-left: 10px !important{{ innerItem.name }}/el-form-item/el-colel-col :span5el-form-item:propcatelogSysList[${index}].children[${childrenIndex}].children[${innerIndex}].catamanageName:rules{required: true,message: 材料名称不能为空,trigger: change,}el-inputv-modelinnerItem.catamanageNameclearableplaceholder请输入材料名称//el-form-item/el-colel-col :span3el-form-item:propcatelogSysList[${index}].children[${childrenIndex}].children[${innerIndex}].treeFormationTime:rules{required: true,message: 请使用 - 将年月日分割,pattern:/(^[1-2][0-9][0-9][0-9]-([1][0-2]|0?[1-9])-([12][0-9]|3[01]|0?[1-9])$)|(^[1-2][0-9][0-9][0-9]-([1][0-2]|0?[1-9])$)|(^[1-2][0-9][0-9][0-9]$)/,trigger: change,}el-inputv-modelinnerItem.treeFormationTimeclearableplaceholder示例2023-01-01//el-form-item/el-colel-col :span2el-form-item:propcatelogSysList[${index}].children[${childrenIndex}].children[${innerIndex}].pagesNum:rules[{required: true,message: 页数不能为空,pattern: /^[1-9]\d*$/,trigger: change,},]el-inputv-modelinnerItem.pagesNumclearableplaceholder页数//el-form-item/el-colel-col :span6el-form-itemel-inputv-modelinnerItem.remarkclearableplaceholder请输入备注//el-form-item/el-colel-col :span2 styletext-align: centerel-form-itemel-buttoniconel-icon-viewtypetextclickhandleDelete(index,innerItem,childrenIndex,innerIndex)删除/el-button/el-form-item/el-col/el-row/vab-draggable/el-row/vab-draggable/el-row/el-form/el-rowArchiveCatelogUserTable refcatelogUser//el-card
/template
script
// 引入将阿拉伯数字转为中文的js文件import { numberToChinese } from /utils/index// 允许同级目录进行拖拽排序import VabDraggable from vuedraggable// 将拖拽后的排序重新更新// 删除import {updateSortById,remove} from /api/xxxexport default{props: {archiveId: {type: String,default: ,require: true,},},filters: {numberFilter(num) {return numberToChinese(num)},},components: {VabDraggable,},computed: {dragOptions() {return {animation: 600,group: description,}},},data(){return{catelogHeaderList: [{ id: 1, title: 类号, span: 1 },{ id: 2, title: 类别名称, span: 5 },{ id: 3, title: 材料, span: 5 },{ id: 4, title: 材料形成时间 年 月 日, span: 3 },{ id: 5, title: 页数, span: 2 },{ id: 6, title: 备注, span: 6 },{ id: 7, title: 操作, span: 2 },],catelogUserForm: {catelogSysList: [],},catalogCollectionRules: {},catelogSysLoading:false, disabledDrag: false, // 是否禁止同级拖拽}},mounted(){this.fetchData()},methods:{/*** 获取catelogUser一级目录列表*/fetchData() {this.catelogSysLoading truegetMenyByArchiveId(this.archiveId).then((res) {this.catelogUserForm.catelogSysList res.datathis.list JSON.parse(JSON.stringify(res.data))this.catelogSysLoading false})},/*** 打开添加材料对话框添加材料此功能不详细赘述*/handleAddCatelogUser(item) {// this.$refs.catelogUser.showDetailDialog(item.id,item.catelogSysId,item.catamanageName)},/*** 拖拽排序* param {Object} event*/onEnd(evt) {//父级idlet parentId evt.from.dataset.id//找到父级所在的索引let parentIi this.catelogUserForm.catelogSysList.findIndex((e) e.id parentId)//父级let nowList this.catelogUserForm.catelogSysList[parentIi]let buhui this.list[parentIi]//当前拖动对象// debuggerlet nowItemId evt.item._underlying_vm_.idlet nowIndex nowList.children.findIndex((e) e.id nowItemId)let flag nowList.children[nowIndex].id buhui.children[nowIndex].idnowList.children.forEach((e, i) {e.sort i 1})if (!flag) {updateSortById(nowList.children).then((res) {this.$baseMessage(res.msg, success)this.fetchData()})}},/*** 删除保存/未保存到数据库*/handleDelete(parentIndex, item, index, flag) {if (item.id ! null) {this.$baseConfirm(您确定要删除当前项吗?, null, async () {const { msg } await remove(item.id)this.$baseMessage(msg, success)await this.fetchData()})} else {if (flag del) {this.catelogUserForm.catelogSysList.map((e) {if (e.id item.parentId) {this.catelogUserForm.catelogSysList[parentIndex].children.splice(index, 1)}})} else {this.catelogUserForm.catelogSysList.map((e) {e.children.map((r) {if (r.id item.parentId) {this.catelogUserForm.catelogSysList[parentIndex].children[index].children.splice(flag, 1)}})})}}},}}
/script数据格式如下
二. 引入文件
保留两位小数并且整数部分三位一个逗号分隔符的数字金钱标准表示法
export function parseFormatNum(number) {let n 2;if (n ! 0) {n n 0 n 20 ? n : 2;}if (number null) number 0;number parseFloat((number ).replace(/[^\d\.-]/g, )).toFixed(n) ;const sub_val number.split(.)[0].split().reverse();const sub_xs number.split(.)[1];let show_html ;for (let m 0; m sub_val.length; m) {show_html sub_val[m] ((m 1) % 3 0 m 1 ! sub_val.length ? , : );}if (n 0) {return show_html.split().reverse().join();} else {return (show_html.split().reverse().join() . sub_xs);}
}阿拉伯数字转为汉字
export const numberToChinese (num) {const changeNum [零, 一, 二, 三, 四, 五, 六, 七, 八, 九] // changeNum[0] 零const unit [, 十, 百]num parseInt(num)const getWan (temp) {const strArr temp.toString().split().reverse()let newNum for (var i 0; i strArr.length; i) {newNum (i 0 strArr[i] 0? : i 0 strArr[i] 0 strArr[i - 1] 0? : changeNum[strArr[i]] (strArr[i] 0 ? unit[0] : unit[i])) newNum}return newNum}const overWan Math.floor(num / 100)let noWan num % 100if (noWan.toString().length 2) {noWan 0 noWan}let strr overWan ? getWan(overWan) 百 getWan(noWan) : getWan(num)if (strr.split()[0] 一) {if (num 10) {return strr.substring(0)} else {return strr.substring(1)}} else {return overWan ? getWan(overWan) 百 getWan(noWan) : getWan(num)}
}三. 参考
elementvue表格点击变成输入框并获取焦点可编辑状态el-table内表单校验
