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;
}
  1. 控制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>
  1. 更改某个单元格样式(两种 header-cell-style和cell-style)
            <vk-table
                :header-cell-style="cellStyle"
            >
  
// cellStyle({ rowIndex, columnIndex }) { if (rowIndex === 0 && columnIndex === 3) { return 
// 'cursor: pointer'; } else { return ''; } }

  1. 去掉表格所的线
    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;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值