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"

相关推荐
Hexene...9 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情11 分钟前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz15 分钟前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w90892585924 分钟前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜053 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界3 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
一瓣橙子3 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax
Hilaku3 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员3 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js