vue 动态改变标题及某一行变成红色

	<template>
		 <div>
		 	 <Table
	          border
	          id="v_tableFull"
	          :maxHeight='tableFullConHeight'
	          :columns="columns"
	          :data="dataList"
	          :total="total"
	          :row-class-name="rowClassName"
	          @on-selection-change="seletTableRow"
	      >
     	 </Table>	
		 </div>
	</template>
	
	<script>
	export default {
		 data () {
		   return {
		    tableFullConHeight: "500", // table的高度
		    total: 0, // 默认为0 
		    dataList: [], // 返回的数据集合
		    columns: [
		       /* {
		          type: "selection",
		          width: 70,
		          align: "center",
		        },*/
		        {
		          title: "序号",
		          type: "index",
		          width: 70,
		          align: "center",
		        },
		         {
		          title: "XXXX",
		          type: "index",
		          width: 120,
		          align: "center",
		        },
		        {
          title: "变现能力比率",
          align: "center",
          children: [
            {
              title: '流动比率',
              align: "center",
              children: [
               {
                 title: "flowRateL", // 给可变的标题一个变量
                 align: "center",
                 key: "flowRate",
                 resizable: true, // 可以拖动改表格宽度
                 width: 100,
            },
            {
              title: '速动比率',
              align: "center",
              children: [
                {
                  title: 'quickRatioL', // 给可变的标题一个变量
                  align: "center",
                  key: "quickRatio",  
                  resizable: true, // 可以拖动改表格宽度
                  width: 100,
                }]
                },
               ]
              },
		     ],
		   }
		 },
		 mounted(){
		 this.getQueryInfo()

		},
		 created () {
		
		 },
		 methods: {
		 	// 选择方法
			  seletTableRow(row){
			  
			   },
			   // 某一行符合规则变红 原理是class样式可变
		    rowClassName(row) {
		      if(row.isMontEntp == '1'){
		        return 'demo-table-info-row-07';
		      },
		      // 查询标题信息
		      getQueryInfo() {
				      let data = {}; // 查询条件
		           data.ifEnbl = 1;
			      this.$net
			          .send({
			            server: 'XXXXXXX',
			            data: data,
			          })
			          .then((data) => {
			            if (data.code === "200") {
			              this.titleList = data.data.result;
			              // 将返回的titleList 变成map集合
			              for (let i = 0; i < data.data.length; i++) {
			                var key = data.data[i].targetCod + "L"; // targetCod 是实体类的属性
			                var value = data.data[i].entpWarnVlu; // targetCod 对应的值,标题显示的值
			                this.titleMap[key] = moneyFormat(value); // moneyFormat格式化金额的方法
			              }
			             // console.log( this.titleMap)
			              this.columns.forEach((item, index1) => {
			              	// 循环定义的 columns 判断是否有子类 注意index要区分
			                if (item.children) {
			                  item.children.forEach((item, index2) => {
			                     if (item.children) {
			                     	// 最后一层子类的循环
			                       item.children.forEach((item, index3) => {
			                        // console.log( item.title)
			                         if (new Map(Object.entries(this.titleMap)).get(item.title)) {									// 判断是否存在targetCod 对象属性
			                         // 注意set的位置不能错误
			                           this.$set(this.columns[index1].children[index2].children[index3], 'title', new Map(Object.entries(this.titleMap)).get(item.title))
			                         }
			                       })
			                     }
			                  })
			                }
			              });
			            } else {
			              this.$Modal.error({
			                title: "错误信息",
			                content: data.msg,
			              });
			            }
			          });
		      },
           },
		 },
		 components: {
		
		 }
		}
	</script>
	
	<style scoped >
		.ivu-modal-confirm-body {
	        word-wrap: break-word;
	     }
		.ivu-table .demo-table-info-row-07 td{
		  color: #ff0000;
		}
		.ivu-table .demo-table-info-row-02 td{
		  color: #0077ff;
		}
		.ivu-table .demo-table-info-row-back td{
		  color: #f58b0b;
		}
	</style>

效果图

相关推荐

  1. Vue实现输入框高亮

    2024-03-22 22:04:02       39 阅读
  2. Vue动态合并

    2024-03-22 22:04:02       42 阅读
  3. vue 动态改变css样式

    2024-03-22 22:04:02       13 阅读
  4. vue项目添加改变浏览器标签title的标题

    2024-03-22 22:04:02       45 阅读
  5. 【无标题Vue3想在scss中想使用动态变量

    2024-03-22 22:04:02       29 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-22 22:04:02       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-22 22:04:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-22 22:04:02       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-22 22:04:02       20 阅读

热门阅读

  1. 数据科学详解与人工智能关系

    2024-03-22 22:04:02       21 阅读
  2. 前端逻辑错误或UI崩溃解决问题

    2024-03-22 22:04:02       20 阅读
  3. SQL Server创建存储过程

    2024-03-22 22:04:02       19 阅读
  4. 力扣-283. 移动零

    2024-03-22 22:04:02       20 阅读
  5. 基于STM32的寻迹小车设计详细论文

    2024-03-22 22:04:02       15 阅读
  6. Thingworx高可用集群部署(七)-Zookeeper集群部署

    2024-03-22 22:04:02       17 阅读
  7. Redis切换数据库的详细介绍

    2024-03-22 22:04:02       23 阅读
  8. 洛克王国卡小游戏2

    2024-03-22 22:04:02       16 阅读
  9. Yarn 管理的前端项目转换为使用 npm

    2024-03-22 22:04:02       20 阅读
  10. Redis 产生阻塞的原因,如何找到阻塞的原因

    2024-03-22 22:04:02       16 阅读
  11. 快速排序--C语言

    2024-03-22 22:04:02       21 阅读
  12. 【大数据技术】Hive基本原理以及使用教程

    2024-03-22 22:04:02       19 阅读
  13. docker 修改默认存储位置

    2024-03-22 22:04:02       17 阅读
  14. CSS color-mix() 函数

    2024-03-22 22:04:02       20 阅读
  15. less与sass哪个更好用

    2024-03-22 22:04:02       21 阅读
  16. NoSQL

    NoSQL

    2024-03-22 22:04:02      16 阅读