vue3 elementplus问题集合（实时更新）

1.更改element样式

element样式都是写死的，虽然官方说直接.el-xxx{}就行但是有的还是改不了，deep是样式穿透，可以更强力的更改样式然后再加个！important让这个样式的优先级更高。（其实我还没完全弄明白这个deep是干什么的）
::v-deep(.class){
xxxxx!important
}

2.更改element里的label等标签内容

比如，el-tab，官方给的是

但我做项目时需要加一个more，但是这个more不能是tab，只是一个链接按钮，而且不能把more放在el-tab外面，太影响美观了，我就去网上查了方法，只找到一个方法就是用slot去更改label的内容，但是他们给的都是vue2的slot用法，通过查询vue3中slot的使用方法我才得以解决这个问题。

首先vue3中使用的是v-slot，使用方法如下：

<el-tab-pane name="more">
	<template v-slot:label>
           ... 
	template>
el-tab-pane>

注意这里是：label不是= ！
在里面放上label属性位置需要的内容就可以绑定到label的位置上，

其次，在el-tab里面假上：before-leave，这个在切换tab时触发，true则切换tab里的内容，false则不切换

<el-tabs
        tab-position="top"
        style="height: 200px; width: 30%; line-height: 50px"
        :before-leave="moreState"
      >

 methods: {
    moreState(tab, event) {
      if (tab == "more") {
        console.log("/", tab, event);
        return false;
      } else {
        return true;
      }
    },
  },

这里的tab就是el-tab-pane name="more"里的name，当name为more时不切换tab下的内容

3.nextTick

this.$nextTick()后面的内容在dom改变后执行可以异步刷新页面

4.el-main里的default-active

vue3里不再用this.$router.path,而是有了

:default-active="this.$router.currentRoute._value.fullPath"

可以console.log查看其内容，用这个可以动态激活样式，比如刷新页面也可以激活相应的el-menu-item

5.当一个组件表示多个路由时只执行一次created

用watch监听器（我们做的路由是xxx/n(n是数字，根据数字不同，xxx.vue展示不同的页面，就是只注册了一个路由path:’/xxx/:i’,))

watch: {  '$route' () { created里的代码}},

6.页面跳转之后自动到页面顶部

在main.js里加入

router.afterEach(() => {
    window.scrollTo(0,0);
})

7.去掉顶栏el-sub-menu的右侧小箭头icon

el-sub-menu默认样式右侧有小箭头，如果你的排版比较密集就隐藏起来，如果宽度增加就会显示出来

::v-deep(i.el-icon.el-sub-menu__icon-arrow) {
    display: none;
}

8.顶栏子组件宽度设定

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
  min-width: 150px!important;
  padding-left: 25px !important;
}

！注意：这个要放在app.vue才有效，不然没有用

9.中文字符串过长溢出时，变成。。。来显示

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

英文不需要white-space: nowrap;中文才要这个

10.el-table中将每一个cell变成可触发点击事件的div

<el-table-column fixed label="\">
          <template #default="scope">
            <div @click="click(scope.row.xxx)">
              <span style="margin-left: 10px">{{ scope.row.xxx }}span>
            div>
          template>
        el-table-column>

用插槽scope这个官方文档里有；scope.row.xxx，这个scope.row是tableData里这一行的内容，因为要每个cell都要点击，比如我做的是每周的课程表，在tableData里这个xxx就可以设成Mon，Tue。。。。之类的，

注意

::v-deep(.cell){
  height:xxpx !important;
}

如果你这一行可能没有内容，那么这个cell是点不到的，因为它没有设置高度，是靠内容撑开的，所以样式穿透强制更改cell的样式