使用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

参考文章    参考文章

 

表格

时间格式化

时间日期列的数据格式化

<!-- html -->
<el-table-column
    prop="time"
    label="时间"
    :formatter="timeFormat"
    width="160">
</el-table-column>

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

自定义列（比如操作）

<el-table-column
    fixed="right"
    label="操作"
    width="100">
    <!-- scope.row是当前行那条数据 -->
    <template slot-scope="scope">
        <el-button type="text" size="small" @click="editArticle(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="deleteArticle(scope.row)">删除</el-button>
    </template>
</el-table-column>