Vue 技巧

1、element-ui更改el-table表头背景颜色和字体颜色

根据elementui官网的说法，header-cell-style是表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

<el-table :header-cell-style="{background:'#eef1f6',color:'white'}">
...
</el-table>

2、vue-element系列 内table插入超链接 a 标签用法

<el-table-column :label="$t('es.cloud_url')" min-width="15px" align="center">
   <template slot-scope="{row}">
       <el-link :href="row.cloud_url" target="_blank" class="buttonText"  type="primary" :underline="false">详情</el-link>
   </template>
</el-table-column>

3、关闭语法检查

在项目根目录中创建一个 vue.config.js 文件，添加如下代码：

module.exports ={
    lintOnSave : false //关闭语法检查
}

4、confirm确认框用法

this.$confirm("是否确认该操作","提示",{
    iconClass: "el-icon-question",//自定义图标样式
    confirmButtonText: "确认",//确认按钮文字更换
    cancelButtonText: "取消",//取消按钮文字更换
    showClose: true,//是否显示右上角关闭按钮
    type: "warning",//提示类型  success/info/warning/error
}).then(function(){
    //确认操作
}).then((data) => {
    //取消操作
}).catch(function (err) {
    //捕获异常
});

5、el-table 设置隔行变色

html

<el-table
      :cell-style="rowStyle"
      stripe
      :data="tableData"
      border
      style="width: 100%" 
    >

js

methods: {
    rowStyle({ row, column, rowIndex, columnIndex }) {
        //设置表格每行间隔颜色
        if (rowIndex % 2 === 0) {
            return "background:white";
        }
        if (rowIndex % 2 === 1) {
            return "background:rgb(88,253,203)";
        }
    },
}

6、通过 $refs 修改元素的样式

<div ref="masklayer">向右滑动查看更多</div>

methods:{
	gotouchstart(){
   	    this.$refs.masklayer.style='display:none'
     }
}

7、el-table-column 组件传 prop 的数据怎么用过滤器？

<el-table-column prop="end" align="center" label="产品到期日">
        <template slot-scope="scope">
          {{scope.row.end | dateFormat}}
        </template>
</el-table-column>

8、请求后台返回的时间格式，需要改为 yyyy-DD-MM HH:mm:ss

import moment from 'moment'
// 定义时间格式化全局过滤器
Vue.filter('dateFormat', (dateStr, pattern = 'yyyy-DD-MM HH:mm:ss') => {
    return moment(dateStr).format(pattern)
})

9、el-form 表单正则表达式校验

end: [
    {
        pattern:
        /^((19\d{2})|(20\d{2}))-((0[1-9])|(1[0-2]))-((0[1-9])|([12]\d)|(3[01]))$/,
        required: true,
        message: "请输入正确的产品到期日",
        trigger: "blur",
    },
],

10、配置文件，自定义端口号

module.exports = {
    lintOnSave : false, // 关闭语法检查
    devServer:{ // 自定义端口号
        port: 8083
    }
}

11、vue 获取时间

<script>
 new Vue({
		el: '#ID',
		data:{
		gettime:""
		},
		mounted: function() {
		      var _this = this;
		      let yy = new Date().getFullYear();
		      let mm = new Date().getMonth()+1;
		      let dd = new Date().getDate();
		      let hh = new Date().getHours();
		      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
		      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
		      _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
		      console.log(this.gettime)
		},
		
		});
</script>

12、过滤器中不能使用 this（Vue 实例）

解决办法：在 data 中定义一个 that = this，在需要过滤的过滤器中传入 that 参数，然后在过滤器中使用。