element ui + vue 入坑记录

element 版本：2.13.1

一、Table

1.隐藏table 滚动条

.el-table__body-wrapper::-webkit-scrollbar{
    width: 0px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb{
    border-radius: 2px;
    height: 50px;
    background: #fff;
}
.el-table__body-wrapper::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.4);
}

2.去除表格表头的边框线

.el-table th {
    border: none !important;
}

3.改变鼠标表格选中行的样式

.el-table__body tr.current-row >td {
    background: #fff !important;
}
// el-table 中要加入 highlight-current-row  ,否则不生效

4. 改变鼠标移入某行的样式

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fff;
}

5.单元格中使用其他的元素

<el-table-column prop="name" label="名称" >
    <template slot-scope="scope">
    	<!-- 你需要插入的元素，如button  -->
        <el-link type="text" >{{scope.row.name}}</el-link>
    </template>
</el-table-column>

6. 行和列的样式

<!--写在 el-tale 中-->
<!-- 行的样式 -->
:row-style ="{background:'#fff'}"
<!-- 列的样式 -->
:cell-style ="{background:'#fff'}"

二、el-date-picker、el-time-picker

1.日期格式化

<!-- 使用format指定输入框的格式；使用value-format指定绑定值的格式 -->
format = 'yyyy-MM-dd'
value-format = 'yyyy-MM-dd'

三、待续 ……