el-table给列加单位,表头加样式,加斑马纹

javascript 复制代码
<el-table 
ref="table" 
class="dataTable" 
:data="detailList"  
:header-cell-style="tableHeaderColor" 
:row-class-name="tableRowClassName"
highlight-current-row>
        <el-table-column label="序号" align="center" min-width="40px">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="sum" label="总金额" min-width="80px">
          <template slot-scope="scope">{{ scope.row.money}}元</template>
        </el-table-column>
</el-table>

methods:{

    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "striped-row";
      }
      return "";
    },
    tableHeaderColor() {
      return { background: "#4D76FF  !important", color: "#FFFFFF  !important", border: 0, fontSize: "14px" };
    },
}

<style>
/deep/ .el-table .striped-row {
  background-color: #f7f9ff !important;
}
</style>

想给列加单位:<template slot-scope="scope">{{ scope.row.money}}</template>

想给表头加样式::header-cell-style="tableHeaderColor"

想给table加斑马纹::row-class-name="tableRowClassName"

相关推荐
Mintopia7 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
Code季风9 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录10 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia11 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
雲墨款哥13 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023417 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder23 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
晴殇i44 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
bemyrunningdog1 小时前
二进制权限控制方案
javascript·react.js·ecmascript