这篇文章将为大家详细讲解有关vue如果修改Element的el-table样式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
公司主营业务:成都做网站、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出泰山免费做网站回馈大家。修改Element中的el-table样式,可以使用以下几种方法:
1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。
2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
4. header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
示例代码如下:
<template> <div> <div > <el-table :data="tableData" height="300" border stripe="true" :row- :header-cell- > <el-table-column prop="tag" label="tag" width="150"> </el-table-column> <el-table-column prop="confidence" label="confidence" width="180"> </el-table-column> <el-table-column prop="category_tag_level" label="category_tag_level"> </el-table-column> </el-table> </div> </div> </template> <script> export default{ data () { return { tableData: [{ tag: '体育', confidence: '0.8213628173213', category_tag_level: '123' }, { tag: '体育', confidence: '0.8213628173213', category_tag_level: '123' }, { tag: '体育', confidence: '0.8213628173213', category_tag_level: '123' }, { tag: '体育', confidence: '0.8213628173213', category_tag_level: '123' }, { tag: '体育', confidence: '0.8213628173213', category_tag_level: '123' }, { tag: '体育', confidence: '0.8213628173213', category_tag_level: '123' }, { tag: '体育', confidence: '0.8213628173213', category_tag_level: '123' }] } }, methods:{ //设置表格行的样式 tableRowStyle({row,rowIndex}){ return 'background-color:pink;font-size:15px;' }, //设置表头行的样式 tableHeaderColor({row,column,rowIndex,columnIndex}){ return 'background-color:lightblue;color:#fff;font-wight:500;font-size:20px;text-align:center' } } } </script> <style> </style>
文章题目:vue如果修改Element的el-table样式-创新互联
文章起源:https://www.cdcxhl.com/article0/digsoo.html
成都网站建设公司_创新互联,为您提供域名注册、电子商务、响应式网站、网站维护、面包屑导航、小程序开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联