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"

相关推荐
阿伟来咯~4 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端9 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱11 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai21 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨22 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry3 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子3 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js