vue2 element的一些代码优化技巧

兔子先森Ace

已于 2022-11-15 11:25:47 修改

阅读量317

点赞数 1

分类专栏： vue 文章标签： javascript 前端 elementui vue.js 代码规范

于 2022-10-19 09:01:34 首次发布

本文链接：https://blog.csdn.net/qq_44793507/article/details/127400547

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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" }]
});