您当前的位置:首页 > 电脑百科 > 数据库 > 百科

element-ui table 动态表头 错位问题

时间:2022-02-21 13:20:22  来源:  作者:一品晓灰
<el-table v-loading="loading" :data="list" :border="true" @selection-change="selectChange" :key="tableKey">
  <el-table-column type="selection" width="45"></el-table-column>
  <el-table-column prop="rank" label="排名" width="60"></el-table-column>
  <el-table-column prop="username" label="姓名" width="90" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column prop="phone" label="手机" width="110"></el-table-column>
  <el-table-column v-if="departMaxLevel>=1" prop="topDepartName" label="一级部门" width="120" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="departMaxLevel>=2" prop="secDepartName" label="二级部门" width="120" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="departMaxLevel>=3" prop="thirdDepartName" label="三级部门" width="120" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="isCheck==1" prop="status" label="审核操作" width="100" >
    <template slot-scope="scope">
      <span v-if="scope.row.status == 1">
        <el-button size="mini" type="success"  @click="statusPass(scope.row, 2)" icon="el-icon-check" circle title="通过"></el-button>
        <el-button size="mini" type="danger"  @click="statusPass(scope.row, 3)" icon="el-icon-close" circle title="不通过"></el-button>
			</span>
			<span v-else>
  			{{ scope.row.statusname }}
    	</span>
  	</template>
  </el-table-column>
  <el-table-column v-if="isCheck==1" prop="back_remark" label="审核理由" width="150" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="isCheck==1" prop="statustime" label="审核时间" width="150"></el-table-column>
</el-table>

export default {
  data() {
    return {
      list: [],
      loading: false,
      offset: 0,
      limit: 10,
      limitRange: [10,20,50,100,200,500,1000],
      total: 0,
      currentPage: 1,

      tableKey: Math.random(),
    }
  },
  
  methods: {
    getRankPersonList() {
        this.list = [];
        this.loading = true;
        var self = this;
        xx.ajax({
        op: 'xxxx/xxxxxxxx',
        send: {
          activityId: self.activityId,
          orgid: self.orgid,
          offset: self.offset,
          limit: self.limit,
        },
        callback(data) {
          self.loading = false;
          if (data.status == 1) {
            self.departMaxLevel = data.data.departMaxLevel;
            self.isCheck = data.data.isCheck;
            self.list = data.data.rows;
            self.total = data.data.total;
            self.tableKey = Math.random();
          } else {
            self.list = [];
            self.total = 0;
            self.$message({message: '' + data.msg, type: 'warning'});
          }
        }
      });
    },
  }

如上代码所示,定义一个 tableKey = Math.random() 轻松解决了,动态列错位的问题。



Tags:动态表头   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
element-ui table 动态表头 错位问题
<el-table v-loading="loading" :data="list" :border="true" @selection-change="selectChange" :key="tableKey"> <el-table-column type="selection" width="45"></el-t...【详细内容】
2022-02-21  Search: 动态表头  点击:(487)  评论:(0)  加入收藏
▌简易百科推荐
向量数据库落地实践
本文基于京东内部向量数据库vearch进行实践。Vearch 是对大规模深度学习向量进行高性能相似搜索的弹性分布式系统。详见: https://github.com/vearch/zh_docs/blob/v3.3.X/do...【详细内容】
2024-04-03  京东云开发者    Tags:向量数据库   点击:(9)  评论:(0)  加入收藏
原来 SQL 函数是可以内联的!
介绍在某些情况下,SQL 函数(即指定LANGUAGE SQL)会将其函数体内联到调用它的查询中,而不是直接调用。这可以带来显著的性能提升,因为函数体可以暴露给调用查询的规划器,从而规划器...【详细内容】
2024-04-03  红石PG  微信公众号  Tags:SQL 函数   点击:(5)  评论:(0)  加入收藏
如何正确选择NoSQL数据库
译者 | 陈峻审校 | 重楼Allied Market Research最近发布的一份报告指出,业界对于NoSQL数据库的需求正在持续上升。2022年,全球NoSQL市场的销售额已达73亿美元,预计到2032年将达...【详细内容】
2024-03-28    51CTO  Tags:NoSQL   点击:(18)  评论:(0)  加入收藏
为什么数据库连接池不采用 IO 多路复用?
这是一个非常好的问题。IO多路复用被视为是非常好的性能助力器。但是一般我们在使用DB时,还是经常性采用c3p0,tomcat connection pool等技术来与DB连接,哪怕整个程序已经变成以...【详细内容】
2024-03-27  dbaplus社群    Tags:数据库连接池   点击:(19)  评论:(0)  加入收藏
八个常见的数据可视化错误以及如何避免它们
在当今以数据驱动为主导的世界里,清晰且具有洞察力的数据可视化至关重要。然而,在创建数据可视化时很容易犯错误,这可能导致对数据的错误解读。本文将探讨一些常见的糟糕数据可...【详细内容】
2024-03-26  DeepHub IMBA  微信公众号  Tags:数据可视化   点击:(10)  评论:(0)  加入收藏
到底有没有必要分库分表,如何考量的
关于是否需要进行分库分表,可以根据以下考量因素来决定: 数据量和负载:如果数据量巨大且负载压力较大,单一库单一表可能无法满足性能需求,考虑分库分表。 数据增长:预估数据增长...【详细内容】
2024-03-20  码上遇见你  微信公众号  Tags:分库分表   点击:(17)  评论:(0)  加入收藏
在 SQL 中写了 in 和 not in,技术总监说要炒了我……
WHY?IN 和 NOT IN 是比较常用的关键字,为什么要尽量避免呢?1、效率低项目中遇到这么个情况:t1表 和 t2表 都是150w条数据,600M的样子,都不算大。但是这样一句查询 &darr;select *...【详细内容】
2024-03-18  dbaplus社群    Tags:SQL   点击:(8)  评论:(0)  加入收藏
应对慢SQL的致胜法宝:7大实例剖析+优化原则
大促备战,最大的隐患项之一就是慢SQL,对于服务平稳运行带来的破坏性最大,也是日常工作中经常带来整个应用抖动的最大隐患,在日常开发中如何避免出现慢SQL,出现了慢SQL应该按照什...【详细内容】
2024-03-14  京东云开发者    Tags:慢SQL   点击:(10)  评论:(0)  加入收藏
过去一年,我看到了数据库领域的十大发展趋势
作者 | 朱洁策划 | 李冬梅过去一年,行业信心跌至冰点2022 年中,红衫的一篇《适应与忍耐》的报告,对公司经营提出了预警,让各个公司保持现金流,重整团队,想办法增加盈利。这篇报告...【详细内容】
2024-03-12    InfoQ  Tags:数据库   点击:(35)  评论:(0)  加入收藏
SQL优化的七个方法,你会哪个?
一、插入数据优化 普通插入:在平时我们执行insert语句的时候,可能都是一条一条数据插入进去的,就像下面这样。INSERT INTO `department` VALUES(1, &#39;研发部(RD)&#39;, &#39...【详细内容】
2024-03-07  程序员恰恰  微信公众号  Tags:SQL优化   点击:(21)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条