vue中表格设置某列样式、不显示表头问题

更新时间：2023年10月19日 15:28:20 作者：泥巴~

这篇文章主要介绍了vue中表格设置某列样式、不显示表头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中表格设置某列样式、不显示表头

第一列为标题，第二列为内容

1.表格数据

  tableData: [{
                    name: '1：',
                    data: '2',
                }, {
                    name: '1：',
                    data: '2',
                },{
                    name: '1：',
                    data: '2',
                },{
                    name: '1：',
                    data: '2',
                }, {
                    name: '1：',
                    data: '2',
                },{
                    name: '1：',
                    data: '2',
                }]

2.html代码

  <el-table
                v-show="activeName == 'second'"
                :data="tableData"
                border
                stripe//斑马线
                style="width: 100%"
                :show-header="false"//隐藏表头
                fit
                **:cell-class-name="blue"**//操作列
        >
            <el-table-column
                    prop="name"
                    label="名称"
                    width="180"
                    color="#f00"
            >
            </el-table-column>
            <el-table-column
                    prop="data"
                    label="数据"
            >
            </el-table-column>
        </el-table>

3.修改第一列表格样式操作

 methods:{
            blue({row,column,rowIndex,columnIndex}){
                if(columnIndex == 0) {
                    return 'blue'
                }
            }
        }

4.改为自己想要的蓝色

 .blue{
        color: #409EFF;
    }

vue根据条件给表格高亮某一行

1.表格绑定属性:row-class-name="tableRowClassName"

<el-table
        :data="dataList"
        stripe
        border
        v-loading="listLoading"
        class="detable"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        >

2.方法

tableRowClassName({ row, rowIndex }) {
      if (row.sbillsNo==this.sbillsNoQuery)  {
        return 'rowBackground';
       }
     },

3.样式

<style >
.el-table .rowBackground td,.el-table--enable-row-hover .el-table__body tr.rowBackground:hover>td{background: #ceebff;}
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

利用Dectorator分模块存储Vuex状态的实现
这篇文章主要介绍了利用Dectorator分模块存储Vuex状态的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
使用Axios拦截器中止Vue请求的步骤详解
假设 App 的用户可以在短时间内进行多个 API 调用,但您只想显示上次调用的结果,之前正在进行的请求变得无关紧要,在这种情况下,您可以利用 Axios 拦截器,本文给大家介绍了如何使用Axios拦截器中止Vue请求,需要的朋友可以参考下
2023-11-11
Vue实现红包雨小游戏的示例代码
红包也叫压岁钱，是过农历春节时长辈给小孩儿用红纸包裹的礼金。本文将通过Vue制作一个红包雨小游戏，文中的示例代码讲解详细，需要的可以参考一下
2022-01-01
Vue组件之间的参数传递与方法调用的实例详解
这篇文章主要介绍了Vue组件之间的参数传递与方法调用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
通过本文给您演示一下如何有效地使用递归组件，我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。下面通过本文给大家分享用 Vue.js 递归组件实现可折叠的树形菜单，需要的朋友参考下吧
2017-12-12
vue使用富文本编辑器vue-quill-editor的操作指南和注意事项
vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue使用富文本编辑器vue-quill-editor的操作指南和注意事项,需要的朋友可以参考下
2023-05-05
vue-cli项目中img如何使用require动态获取图片
这篇文章主要介绍了vue-cli项目中img如何使用require动态获取图片，具有很好的参考价值，希望对大家有所帮助。
2022-09-09
浅谈Vue.js组件(二)
这篇文章主要介绍了Vue.js组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue cli3 库模式搭建组件库并发布到 npm的流程
这篇文章主要介绍了Vue cli3 库模式搭建组件库并发布到 npm，以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程,需要的朋友可以参考下
2018-10-10
前端uniapp微信小程序跨域问题的解决方法
跨域指的是在浏览器中,当一个网页尝试加载另一个不同域名(或协议、端口号)下的资源时所面临的限制,这篇文章主要给大家介绍了关于前端uniapp微信小程序跨域问题的解决方法,需要的朋友可以参考下
2024-08-08