elementUI+Vue+CSS 笔记

表格表头样式

html

<el-table :header-cell-style="getRowClass"></el-table>

js

// 设置表格第一行的颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:#2A3253'
        } else {
          return ''
        }
      },

https://blog.csdn.net/Feast_aw/article/details/80777577

表格默认hover背景颜色

.el-table__body tr:hover>td {
background: #1b223e !important;
}

https://segmentfault.com/q/1010000012532291?sort=created

滚动条

 /*CSS 实现隐藏滚动条同时又可以滚动*/
::-webkit-scrollbar {display:none}

https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html

 /*定义滚动条轨道*/
  ::-webkit-scrollbar-track
  {
    background-color: #141935;
  }
  /*定义滚动条滑块*/
  ::-webkit-scrollbar-thumb
  {
    background-color: #141935;
  }
eg:
.menus_list ::-webkit-scrollbar-thumb
  {
    background-color: rgba(0, 154, 255, .8);
  }

::after

https://www.cnblogs.com/keyi/p/5943133.html

表格嵌套并且在子表格没有数据的时候隐藏展开按钮

https://blog.csdn.net/Null_Bugs/article/details/81146044

表格高度 自适应

https://segmentfault.com/q/1010000013671400

border透明度

HSLA(H,S,L,A)
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
兼容性：不支持IE8及以下版本

eg:
border-bottom:1px solid hsla(0,0%,100%,.3);

https://blog.csdn.net/It_rod/article/details/80615557

正则

409CC97BD5BCC8AF174A53072DF1AA70.jpg

阻止事件冒泡

<a @click.stop="doThis"></a>
https://blog.csdn.net/iceking66/article/details/78246626?locationNum=10&fps=1

elementUI 表格路由跳转

<el-table-column label="问题"
          width="500">
    <template slot-scope="scope">
         <router-link v-if="isHelpResolve" :to="{ name: 'helpsResolve', params: {id: scope.row.id} }">
            <span>{{ scope.row.title }}</span>
         </router-link>
   </template>
</el-table-column>

https://www.jianshu.com/p/fe96cd805f3d

elementUI 表格手风琴

https://blog.csdn.net/sinat_33312523/article/details/78928236

elementUI 动态获取表格展开的数据

<el-table-column type="expand" prop="children">
                <template scope="scope">
                    <el-table stripe v-loading="route_tab_loading" :data="scope.row.children" style="width: 100%; margin-top: -18px; margin-left: 8px;">
                        <el-table-column prop="id" label="ID" v-if="false">
                        </el-table-column>
                        <el-table-column prop="envName" label="环境名" width="170">
                        </el-table-column>
                        <el-table-column prop="routeKey" label="路由键" width="150">
                        </el-table-column>
                        <el-table-column prop="expireTimeStr" label="过期时间" width="200">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template scope="scope">
                                <el-button size="small" @click="handleShowEnv(scope.$index, scope.row)">查看</el-button>
                                <el-button size="small" @click="handleEditEnv(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="small" type="danger" @click="handleDeleteEnv(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>

   // 赋值：
   handleExpandChange(row, isExpanded) {
       row.children = 数据源;
   }

https://segmentfault.com/q/1010000010047284
CrazyJava的解决办法 (很实用)

触发下拉框展开的事件

https://blog.csdn.net/CarryBest/article/details/79959389

indexOf 数组去重

https://www.cnblogs.com/webarn/p/6388486.html