element -表格

诸嘻嘻

已于 2023-08-25 15:41:12 修改

阅读量199

点赞数

文章标签： vue.js elementui javascript

于 2023-08-12 15:27:22 首次发布

本文链接：https://blog.csdn.net/RuiFang123456/article/details/132249216

版权

一、表格全选的复选框隐藏

1.先给表格加个div父标签并添加class为warn_tab.

           <div class="warn_tab">
            <el-table :data="tableData" style="width: 100%;height: 100%">
              <el-table-column type="selection" width="55"/>
              <el-table-column prop="date" label="房间"/>
              <el-table-column prop="name" label="设备"/>
              <el-table-column prop="name" label="型号"/>
              <el-table-column prop="name" label="编码"/>
              <el-table-column prop="name" label="类型"/>
              <el-table-column prop="name" label="次数"/>
              <el-table-column prop="name" label="时间"/>
              <el-table-column prop="name" label="状态"/>
              <el-table-column prop="name" label="时间"/>
              <el-table-column prop="name" label="操作">
              </el-table-column>
            </el-table>
           </div>

2.style中scope与sass写法，

注意：①element plus 需要加上::v-deep

<style scoped lang="scss">
::v-deep .warn_tab{
  .el-table__header-wrapper {
    .el-checkbox__inner {
      display: none !important;
    }
  }
}
</style>

②element ui 需要加上/deep/

/deep/ .warn_tab{
  .el-table__header-wrapper {
    .el-checkbox__inner {
      display: none !important;
    }
  }
}

实现：

二、表格单选

<el-table-column type="selection" width="55" align="center">
    <template slot-scope="scope">
         <el-radio class="radio" v-model="input"                     
                :label="scope.$index">&nbsp;&nbsp;&nbsp;&nbsp;</el-radio>
    </template>
</el-table-column>

三、当设置了全局隐藏滚动条，这时表格数据太多需要单独显示横向滚动条时

***记得给表格加个div标签，并且带上class,如：tables(因为是单独设置)

.tables{
    ::-webkit-scrollbar {
    display: block !important;
  }
}

四、添加了固定列时，需要样式穿透

.tables{

   //左边固定的底部边颜色
  /deep/ .el-table__fixed::before {
    background-color:  rgba(255, 255, 255, 0.2) !important;
    opacity: 0.1;
  }
  //右边固定的底部边颜色
  /deep/ .el-table__fixed-right::before, .el-table__fixed::before{
    background-color:  rgba(255, 255, 255, 0.2) !important;
    opacity: 0.1;
  }

}