使用element-ui的一点笔记

vue-router和element-ui结合实现导航

1、先在el-menu标签上添加router属性,再绑定 :default-active="$route.path" 导航当前项。

2、然后在el-menu-item标签上的index属性设置路由地址即可,例如:index="/home" 

注意:上面方法还会有点小bug,比如当前地址含有不定参比如"/home/a"或者"/home/b"你都想el-menu-item的当前选中为index="/home",这时就要用到计算属性了,例如 :default-active="activeMenu"

computed: {
        activeMenu(){
            if(this.$route.path.match(/\//g).length > 1){    //如果地址含有两个以上"/"
                return this.$route.path.match(/\/\S+\//)[0].slice(0,-1);
            }else{
                return this.$route.path;
            }
        }
    }

 

父组件动态更新props值子组件却不自动刷新

在父组件中更新传给子组件的props值时子组件却没有实时更新状态,这时可以使用watch

参考文章    参考文章

 

表格

时间格式化

时间日期列的数据格式化





// js
methods: {
    // 数据日期格式化显示
    timeFormat(row, column, cellValue, index){
        return dateFormat(cellValue); //这是引入的时间格式化的工具函数
    }
}

自定义列(比如操作)


    
    

 

 

 

你可能感兴趣的:(vue)