element-ui使用心得

1.当前我们打开的element-ui版本是2.11.0版本项目中 “element-ui”: “^2.10.1”,在使用时有些功能和样式的设置必须看版本，之前我在做一个回到顶部的功能时是在tab-pane里面设置回到顶部，页面监听滚动条滚动的距离方法根本没有反应，于是放弃自己写的使用组件里的回到顶部改了样式就可以了，初次使用时没有发现低版本的element-ui里面根本没有回到顶部的样式，仔细观察后才发现是自己接手的系统早期安装的element-ui版本太低，我调了elment-ui官方文档后发现根本没有就知道错了，重新安装了对应的版本，没有安装最新版，比最新版低了一个版本，毕竟新版对担心稳定性的问题。
2.更新的版本后才顿时领悟为什么以前使用element-ui的tag样式显示不全，以及其它问题，以前在遇到问题我都是写class自己补充样式后来发现都是版本的问题，element-ui修改样式只需要加对应的class就可以重新修改还不会影响其它页面的样式。
3.关于表格也有使用的漏洞，element-ui表格添加斑马纹使用stripe，使用到序号的列，需要使用type=‘index’,序号列默认从1开始渲染index值；含有index列的列宽也无法直接用min-width控制宽度，而width会设置成定宽，考虑到pc适配分辨率的问题，我做的项目中需要适配3种屏宽尺寸，整体使用百分比控制部分细节或不同的结构展示会在媒体查询里面写，媒体查询的样式有两种从大到小写，或者从小到大写，不能错乱屏的大小样式，否则无效。
在mounted钩子函数里在三种分辨率下判断并且监听浏览器窗口尺寸大小动态设置分辨率下的表格列宽。

  <el-table :data="publictabData" stripe style="width: 100%;margin-left:30px;padding-right:49px;" :header-row-style="headerRowStyle" class="gongzhonghao" @filter-change="filterTagTable">
    <el-table-column type="index" label="序号" :width="width" ></el-table-column>
     <el-table-column prop="nickname" label="公众号名称" show-overflow-tooltip :min-width="width2"></el-table-column>
                    <el-table-column prop="applyTime" label="提交时间" :min-width="width3"></el-table-column>

                    <el-table-column label="状态" :min-width="minWidth" prop="status" :filters="[{ text: '待处理', value: '0' }, { text: '已添加', value: '1' },{ text: '未通过', value: '2' }]" :filter-multiple='false' filter-placement="bottom-start" :column-key="'aStatus'">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status===0" style="margin: 10px 0;"><span type="text"  style="color:black;">待处理</span></div>
                            <div v-else-if="scope.row.status===1" style="margin: 10px 0;"><span type="text"  style="color:#409EFF;">已添加</span></div>
                           <div v-if="scope.row.status===2" style="margin: 10px 0;"> <span type="text" style="color:#FF9B9B;">未通过</span>
                             <span type="text" v-if="scope.row.status===2" style="color:#FF9B9B;margin-left:100px;cursor:pointer;" class="deletPublic" @click="deletPublic(scope.row.id)">删除</span>
                           </div>
                          
                            <!-- <i class="el-icon-circle-close" v-if="scope.row.status===2"  style="cursor:pointer;color:#FF9B9B"></i> -->
                        </template>
                    </el-table-column>
                </el-table>

上面提供的表格是加了表头筛选器的表格，在过滤方法里绑定过滤项这样表头的筛选器就可以跟着数据联动显示了。

  //表格过滤
        filterTagTable(filters) {
            if (filters.aStatus) {
                this.publicData.status = filters.aStatus[0]
            }
            this.getNickNameList(this.publicData) // 筛选所选项下的所有数据，需要调用后端接口
        },

根据window.innerWidth判断窗口分辨率。在mounted函数里监听并且使用就可以了什么样的大小设置什么样的列宽。

 if (window.innerWidth <= 1024) {
            this.minWidth = '25%';
            this.width='100';
            this.width3="20%";
            this.width2="25%";
            $('.deletPublic').css('margin-left','50px')
        } else {
            this.minWidth = "25%";
               this.width='200';
               this.width3="25%";
               this.width2="30%";
             $('.deletPublic').css('margin-left','100px')
        }
        window.addEventListener('resize', () => {
            if (window.innerWidth <= 1024) {
                this.minWidth = '25%';
            this.width='100';
            this.width3="20%";
            this.width2="25%";
                 $('.deletPublic').css('margin-left','50px');
            } else {
                this.minWidth = "25%";
                     this.width='200';
               this.width3="25%";
               this.width2="30%";
                 $('.deletPublic').css('margin-left','100px');
            }
        })