el-table设置自定义css

隔行变色、表头颜色

// 设置table字体颜色、背景色
.el-table {
  color: #ffffff;
  background-color: transparent !important;
}

设置隔行变色功能

.el-table__body {
  tr.el-table__row {
    &:nth-child(even) {
      td.el-table__cell {
        background-color: #08417f;
      }
    }
    &:nth-child(odd) {
      td.el-table__cell {
        background-color: #0b3a74;
      }
    }
    &:hover {
      td.el-table__cell {
        background-color: #09529b;
      }
    }
  }
}

设置表头颜色

.el-table thead {
  font-size: 14px;
  font-weight: 400;
  color: #479eff;
  background-color: #0064b3;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}

### 自定义 `el-table` 展开行的内容 #### 1. 修改展开图标的显示位置 通过设置 `el-table-column` 组件的 `type=""` 属性,可以调整默认的展开图标所在列的位置。如果希望将展开图标移出第一列,则可以在第一列的 `el-table-column` 中添加该属性[^1]。 ```html <el-table :data="tableData"> <!-- 将展开图标移出第一列 --> <el-table-column label="第一列" align="center" type=""> <template #default="scope">{{ scope.row.name }}</template> </el-table-column> <el-table-column label="第二列" align="center"> <template #default="scope">{{ scope.row.age }}</template> </el-table-column> </el-table> ``` --- #### 2. 实现异步加载数据的功能 当需要在展开行时动态加载数据时,可以通过监听 `expand-change` 事件来触发异步操作并更新对应的数据[^2]。 以下是具体的代码示例: ```vue <template> <el-table :data="tableData" @expand-change="handleExpandChange"> <el-table-column type="expand"> <template #default="props"> <div v-if="props.row.expandContent"> {{ props.row.expandContent }} </div> <div v-else>正在加载...</div> </template> </el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, expandContent: null }, { name: '李四', age: 25, expandContent: null } ] }; }, methods: { handleExpandChange(row, expandedRows) { if (expandedRows.includes(row)) { this.loadRowData(row); } else { row.expandContent = null; } }, loadRowData(row) { setTimeout(() => { row.expandContent = `${row.name} 的详细信息`; }, 1000); // 模拟异步请求延迟 } } }; </script> ``` --- #### 3. 自定义展开行的图标样式 为了更改默认的加号和减号图标及其样式,可以通过 CSS 样式穿透的方式覆盖原有的样式[^3]。 以下是一个完整的自定义样例如下所示: ```css <style lang="scss" scoped> /* 取消原本展开的旋转动效 */ /deep/.el-table__expand-icon { -webkit-transform: rotate(0deg); transform: rotate(0deg); } /* 设置未点击状态下的图标为加号带边框 */ /deep/.el-table__expand-icon .el-icon-arrow-right:before { content: "\e6d9"; border: 1px solid #ccc; padding: 1px; } /* 设置已点击状态下图标为减号带边框 */ /deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before { content: "\e6d8"; } </style> ``` 将其嵌入到 Vue 文件中即可生效。 --- ### 总结 上述方法分别解决了三个核心需求: 1. **调整展开图标所在的列**:通过设置 `type=""` 来控制其位置; 2. **实现异步加载功能**:利用 `@expand-change` 动态获取扩展内容; 3. **定制化图标样式**:借助 CSS 样式穿透技术完成个性化设计。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值