当前位置: 首页 > article >正文

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

<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"


http://www.kler.cn/a/323793.html

相关文章:

  • 查询DBA_FREE_SPACE缓慢问题
  • sqli-labs靶场17-20关(每日四关)持续更新!!!
  • pytest在conftest.py中实现用例执行失败进行截图并附到allure测试报告
  • git撤销、回退某个commit的修改
  • 探秘Spring Boot中的@Conditional注解
  • 无插件H5播放器EasyPlayer.js网页web无插件播放器选择全屏时,视频区域并没有全屏问题的解决方案
  • 【YashanDB知识库】如何dump数据文件,转换rowid, 查询对应内容
  • 9月27日,每日信息差
  • XSS基础
  • 蓝桥杯—STM32G431RBT6(TIM定时器输入捕获频率和占空比)
  • 北斗三号多模对讲机TD70:公专网融合、数模一体、音视频调度,推动应急通信效能升级
  • Xiaojie雷达之路---doa估计(dbf、capon、music算法)
  • 通信工程学习:什么是MIMO多输入多输出技术
  • TDSQL-C电商可视化,重塑电商决策新纪元
  • 我可以通过发包拿到视频网站的视频源文件吗?
  • 软件设计之SSM(1)
  • PWM基础与信号控制
  • C++动态规划问题—第 N 个泰波那契数
  • 物联网助力智慧交通:优势与前景
  • ScrapeGraphAl AI爬虫
  • 零基础教你如何开发webman应用插件
  • Mybatis中字段返回值映射问题
  • XXL-JOB在SpringBoot中的集成
  • 【Redis】安装redis-plus-plus
  • Trick : pair 的二分问题
  • mariadb无法存储中文