ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

vue下拉框字典映射转换失败 js字符串转数字parseInt :value 下拉框无法选择 el-select默认选中 input输入框设为只读 el-table字典转换 vue普通文字标签

vue下拉框字典映射转换失败 js字符串转数字parseInt :value 下拉框无法选择 el-select默认选中 input输入框设为只读 el-table字典转换 vue普通文字标签 微信小程序(字符串转数字)data-price68 bindtaphandleVipthis.setData({ price: parseInt(e.currentTarget.dataset.price) })字典下拉框不自动映射值(字符串转数字)解决后关键点1、value0 与 :value0 不同加冒号:试试2、:valueparseInt(dict.dictValue) 字符串转int试试 parseInt()或用 :valueNumber(dict.dictValue)写死下拉框el-form-item label类型 proptype el-select v-modelform.type stylewidth:240px clearable sizesmall el-option label充值 :value0 / el-option label赠送 :value1 / el-option label校正 :value2 / /el-select /el-form-item字典下拉框el-form-item label学员状态 el-select v-modelform.status stylewidth:200px clearable sizesmall el-option v-fordict in statusOptions :keydict.dictValue :labeldict.dictLabel :valueparseInt(dict.dictValue) / /el-select /el-form-item或者用Numberel-col :span12 el-form-item label类型 proptype el-select v-modelform.type stylewidth:240px clearable sizesmall el-option v-fordict in typeOptions :keydict.dictValue :labeldict.dictLabel :valueNumber(dict.dictValue) / /el-select /el-form-item /el-col下拉框无法选择 选什么都是最后一个正确应为原因这是又不能用:value了:value身份证 错误写法value身份证 正确写法(字符串时不要加冒号)正确示例代码el-form-item label证件类型 propidCardType el-select v-modelform.idCardType stylewidth:200px clearable sizesmall el-option label身份证 value身份证 / el-option label护照 value护照 / el-option label军官证 value军官证 / el-option label其他 value其他 / /el-select /el-form-itemel-select默认选中只能用初始化数据方式// 打开新增的弹出层 handleAdd() { this.open true this.reset() this.title 新增 // 默认初始值 this.form.idCardType 身份证 this.form.status 0 }input输入框设为只读el-col :span8 el-form-item label应交费 el-input v-modelform.needfeeConfig readonlyreadonly stylewidth:200px clearable sizesmall / /el-form-item /el-colel-select设为只读readonlyreadonly input输入框可以用readonlydisableddisabled el-select只能用这个 用readonly无效el-form-item label学员状态 el-select v-modelform.status disableddisabled stylewidth:200px clearable sizesmall el-option v-fordict in statusOptions :keydict.dictValue :labeldict.dictLabel :valueparseInt(dict.dictValue) / /el-select /el-form-item参考注意只读但需要传递到后台readonly 设置对select标签无效方式二、先利用disabled 属性显示但需要在表单提交前移除disabled属性。否则无法向后台传递该参数select idpidreadonlyreadonly disableddisabled / //用此方法时提交表单前移除disabled属性$(#pid).removeAttr(disabled);方式四、利用disabled 和 隐藏的输入框来传值推荐selectreadonlydisableddisabled/input namepid value真实需要传递的参数值 typehidden classhidden el-table字典转换Tag 标签模式(el-tag)el-table-column label学员状态 aligncenter propstatus template slot-scope{row} el-tag v-if(row.status 0) typeprimary{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status 1) typesuccess{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status 2) typesuccess{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status 3) typedanger{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status 4) typesuccess{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status 5) typeinfo{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status -1) typedanger{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status -2) typedanger{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status -3) typewarning{{ statusFormatter(row) }}/el-tag el-tag v-else-if(row.status -4) typedanger{{ statusFormatter(row) }}/el-tag el-tag v-else typeinfo{{ statusFormatter(row) }}/el-tag /template /el-table-column// 字典翻译-状态 statusFormatter(row) { return this.selectDictLabel(this.statusOptions, row.status) }普通模式el-table-column label性别 aligncenter propsex template slot-scope{row} span v-if(row.sex 1) typeprimary男/span span v-else-if(row.sex 2) typesuccess女/span span v-else-if(row.sex 0) typesuccess未知/span /template /el-table-columnvue普通文字标签{{ }} 将元素当成纯文本输出v-text 将元素当成纯文本输出v-html 将元素当成HTML标签解析后输出HTML中的文字标签文字标签1.标题标签h1/h1~h6/h62.段落标签p/p3.普通文字标签span/span没有任任何效果、样式通过style加 font/font4.文字加粗标签b/b 、strong/strong5.文字斜体i/i、em/em6.超链接标签a href路径/a7.删除线、中线s/s、del/del8.下划线标签u/ua标签阻止提交return a href# οnclickreturn false; classmodify value /a;
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进