vue: 新修改element-ui的样式

element-ui样式是很难修改的。

1. 修改表格滚动条样式

  <el-table
    :data="tableData"
    height="250"
    border
     class="your-table"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
  </el-table>

css样式

.your-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}
.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 3px;
}

2. 控制table表格的编辑和删除的显示/隐藏
   // 转自思否：链接

<el-table-column label="权限"min-width="100">
    <template scope="scope">
        <!--假设权限的字段是role-->
        <span>{{scope.row.sole}}</span>
    </template>
</el-table-column>
<el-table-column label="操作" min-width="200">
    <template scope="scope">
        <!--v-if判断，如果当前行的角色权限是‘地区管理员’，就显示按钮，否则不显示-->
        <el-button type="primary" size="small"
                   @click="editDo(scope.row.proCatalogId,1)" v-if="scope.row.sole==='地区管理员'">修改
        </el-button>
        <el-button type="danger" size="small"  v-if="scope.row.sole==='地区管理员'"
                   @click="deleteDo(scope.row)">删除
        </el-button>
    </template>
</el-table-column>

3. 更改某个单元格样式（两种 header-cell-style和cell-style）

            <vk-table
                :header-cell-style="cellStyle"
            >
  
// cellStyle({ rowIndex, columnIndex }) { if (rowIndex === 0 && columnIndex === 3) { return 
// 'cursor: pointer'; } else { return ''; } }

4. 去掉表格所的线
   keywordtable 为表格类名
   // 不加border属性
   // .keywordtable /deep/ .el-table__row > td {
   // border: none;
   // }
   //
   // .el-table:before {
   // height: 0;
   // }
   //不需要表头
   // :show-header=“false”

vue-cli3以上版本的脚手架创建的项目修改form表单的label样式不生效 ::v-deep

// 无法直接给表单元素el-form-item__label加上样式
.el-form-item ::v-deep.el-form-item__label {
float: left !important;
}