vue2 element的一些代码优化技巧
vue2 element的一些代码优化技巧。
·
1、只输入数字 最小1 最大100 且不允许空格
<el-input-number v-model-trim="xxx" :min='1' :max='100'></el-input-number>
2、清除校验
// element的表单清除校验的这个方法可以在弹框关闭的时候添加 调用close方法 传输ref='formInfo' 字段
<el-dialog title="添加商品" :visible.sync="dialogFormVisible" @close="closeDialog('formInfo')">
<el-form :model="formInfo" :rules="rules" ref="formInfo" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="formInfo.name"></el-input>
</el-form-item>
</el-form>
</el-dialog>
<script>
// 关闭对话框
closeDialog(formInfo){
// 清除校验和数据信息
this.$refs[formInfo].resetFields();
},
</script>
3、element表格居中的方式
// 表格内的文字居中 :cell-style="'textAlign:center'"
// 表头居中 :header-cell-style="'textAlign: center'"
<el-table
:cell-style="'textAlign:center'"
:header-cell-style="'textAlign: center'"
>
<el-table-column
prop="name"
label="姓名"
width="180"
>
</el-table-column>
......
</el-table>
4、表格遍历取值的方式
5、转JSON格式
也就是序列化和反序列化
let obj = { id : 1, name : 'zs'}
let dataStr = JSON.stringify(obj)
console.log(data) // "{ id : 1, name : 'zs'}" 字符串格式
let dataObj = JSON.parse(dataStr)
console.log(dataObj) // { id : 1, name : 'zs'} 对象格式格式
// 将数组转json也是一样的
let obj2 = {
id:1,
name:'zs',
info:['吃饭','睡觉']
}
obj2.info = JSON.stringify(obj2.info)
console.log(obj2) // { id:1 ,name:'zs' ,info:"['吃饭','睡觉']"} 字符串格式
}
obj2.info = JSON.parse(obj2.info)
console.log(obj2) // { id:1 ,name:'zs' ,info:['吃饭','睡觉']} 对象格式格式
}
6.字符串时间戳互转
let str = '2022-10-21 00:00:00'
timeTampToStr(str) { // 字符串转时间戳
return Date.parse(new Date(Date.parse(str.replace(/-/g, "/")))) / 1000; // 精确到秒
},
var formatDate = function(time) { // 时间戳转字符串
var time = new Date(parseInt(time)*1000),
year = time.getFullYear(),
month = time.getMonth() + 1,
date = time.getDate(),
hour = (''+time.getHours()).length > 1 ? time.getHours() : '0'+time.getHours(),
minute = (''+time.getMinutes()).length > 1 ? time.getMinutes() : '0'+time.getMinutes(),
second = (''+time.getSeconds()).length > 1 ? time.getSeconds() : '0'+time.getSeconds();
return year+'-'+month+'-'+date+' '+hour+':'+minute+':'+second;
};
7、清除表单数据
通常情况下element
清除表单的方法是使用:xxx.resetFields();
方法,这种方法是根据prop
绑定的字段清除的,prop
也可以关联校验,也就是说清除校验和表单字段,都是通过prop
操作的,如下:
// prop 没有关联 ,表单数据和校验无法通过 resetFields() 清除
<el-form-item label="备注" prop="">
<el-input :rows="4" type="textarea" v-model="goodsInfo.remark" />
</el-form-item>
添加prop
后成功清除校验和数据
<el-form-item label="备注" prop="remark">
<el-input :rows="4" type="textarea" v-model="goodsInfo.remark" />
</el-form-item>
表单校验这块,数据和校验名必须相同:
·goodsInfo· 内的 ·remark· 为数据
·goodsInfoRules· 内的 ·remark· 为校验
两者必须相同,才能对应校验
const goodsInfo = reactive({
remark: "" // 备注
});
const goodsInfoRules = reactive<FormRules>({
remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
});
必须一致才能校验
更多推荐
已为社区贡献9条内容
所有评论(0)