首页 > 其他分享 >Vue怎么改变table的colum的样式

Vue怎么改变table的colum的样式

时间:2022-12-22 11:34:52浏览次数:42  
标签:case tmpPhaseName Vue tmpClassName colum break table col row

在table中设定 :cell-class-name="cellClassName"

template:

<vxe-table border
                   class="mytable-style m-t-2"
                   :cell-class-name="cellClassName"
                   :data="list">

 

script:

cellClassName({ row, column }) {
                var tmpClassName = 'col-grey';
                if (['phase1', 'phase2', 'phase3', 'phase4'].includes(column.property)) {
                    var tmpPhaseName = '';
                    switch (column.property) {
                        case 'phase1':
                            tmpPhaseName = row.phase1;
                            break;
                        case 'phase2':
                            tmpPhaseName = row.phase2;
                            break;
                        case 'phase3':
                            tmpPhaseName = row.phase3;
                            break;
                        case 'phase4':
                            tmpPhaseName = row.phase4;
                            break;
                        default:
                            tmpPhaseName = row.phase1;
                            break;
                    }
                    switch (tmpPhaseName) {
                        case 1:
                            tmpClassName = 'col-green';
                            break;
                        case 2:
                            tmpClassName = 'col-yellow';
                            break;
                        case 3:
                            tmpClassName = 'col-grey';
                            break;
                        default:
                            tmpClassName = 'col-grey';
                            break;
                    }
                    return tmpClassName;
                }


            },

 

标签:case,tmpPhaseName,Vue,tmpClassName,colum,break,table,col,row
From: https://www.cnblogs.com/ydc2023/p/16998007.html

相关文章

  • vue中如何使用prismjs
    安装yarnaddprismjs使用<template>...</template><scriptsetuplang="ts">importPrismfrom'prismjs';import'prismjs/themes/prism.css';Prism.highli......
  • vue组件间值传递
    夫传子父组件代码  子组件代码  效果展示<template><h1>{{msg}}</h1></template><script>exportdefault{name:'HelloWorld',props:{......
  • Vue某列内容以html的形式展示(举例:超链接、a标签)
    1、显示html的方法:将该列的type设成html,那么当给此列赋值为带html标签的内容的时候,html标签不会以文本的形式展示在页面上template:<vxe-table-columnfield="attachmen......
  • vue项目创建
    前言相关官方文档:https://cn.vuejs.org/guide/introduction.html  https://cli.vuejs.org/zh/guide/ 创建vue-cli项目vuecreatetest1......
  • Vuex从入门到精通
    一、vuex介绍目标什么是Vuex为什么学习Vuex通信方案组件关系数据通信父子关系父传子:props;子传父:$emit非父子关系vuex(一种组件通信方案)Vuex......
  • vue-router
    七.Vue-router1、什么是vue-routervue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传......
  • vue中webpack环境中动态注册插件
    //webpack动态引入文件constrequireComonents=require.context("./",true,/\.vue$/);//Vue提供的install方法进行插件的注册/**install方法第一个参数是vue......
  • [vue项目] 后台管理 11111111111111111
    文章目录​​gitee地址​​​​登录业务解析​​​​退出登录​​​​模板结构图​​​​路由的搭建​​​​品牌管理​​​​table数据渲染​​​​分页器​​​​点击添加......
  • [vue] DataV 组件
    http://datav.jiaminghi.com/guide/......
  • Vue3.0 生命周期
    所有生命周期钩子的this上下文都是绑定至实例的。beforeCreate:在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。created:实例创建完成,主要包括数据帧听......