首页 > 其他分享 >Vue内 ElementUI 动态表头渲染顺序错乱问题

Vue内 ElementUI 动态表头渲染顺序错乱问题

时间:2023-05-12 15:58:36浏览次数:41  
标签:Vue 渲染 column ElementUI 表头 顺序

column渲染顺序不正确
数据如下:

['增加', '描述', '修改时间']

错误显示:

原因

自定义:同一层级下条件渲染复数个<el-table-column>标签导致的

正确做法
在一个<el-table-column>标签内通过<template>条件渲染

度娘上的一些其他做法

  1. 添加一个宽度为1的列
    <el-table-column width="1"></el-table-column>

  2. <el-table></el-table>内部不嵌套el-table-column外的元素,可用<template>替代

  3. 动态遍历渲染时, 给<el-table-column>添加key

标签:Vue,渲染,column,ElementUI,表头,顺序
From: https://www.cnblogs.com/xueping0708/p/17394291.html

相关文章

  • vue在手机端页面缩放的控制
    1,问题的提出某vue前端程序,在手机APP上运行。需要做多图片浏览效果,要求如下:进入浏览页面时,显示适应手机页面的缩小图,用户可采用双指缩放,放大查看小图用户点击图片时,弹出大图,宽度尺寸固定为1200px大图可移动查看,但不允许缩放,点击大图后退出以上要求中,第2和3叠加后,可能造成显......
  • Vue2电商实战项目(三)
    排序的操作要求的数据格式-数据格式说明-'1'表示'综合排序'-'2'表示'价格排序'-'asc'表示'升序'-'desc'表示降序-项目的数据格式的样子 -1:asc -1:desc -2:asc -2:desc###Search.index.vue......&quo......
  • vue dom拖拽指令
    还可以封装一下代码,不想封了,移动端pc端区别:事件不同,pc端鼠标事件移动端触摸事件;pc端直接获取e.pageX,移动端e.changedTouches[0].pageX使用直接在dom绑定v-dragdirectives:{drag(el,bindings,vnode){letphone=falseletmax=max||0if(wi......
  • vue 关于element el-dialog使用心得-传参问题
    最近写一个功能用到了弹窗,在弹窗内显示一个子组件。关于el-dialog的el-dialog:visible.sync="xxx  参考https://blog.csdn.net/startyangu/article/details/128029464?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%......
  • Vue项目报错: Component name “xxx“ should always be multi-word vue/multi-word-co
    报错的意思是组件名应该始终是多单词,不应该以单个单词命名组件解决办法1:修改组件名称:例如当前的登陆组件名是login.vue修改成LoginName.vue,组件名需要以驼峰式命名至少两个单词,不一定都得是LoginName.vue可以是NameLogin.vue也可以是LoginNiu.vue总之就是以驼峰式命名......
  • Vue 打包项目出现内存溢出问题
    Vue项目打包遇到内存溢出的问题:npmiincrease-memory-limit-gincrease-memory-limit再执行npmrundev后出现以下问题: 百度了一下,在node_module下的.bin文件夹中查找这个文件: 将这个字符串的双引号去掉:再次运行npmrundev 就可以了 ......
  • vue3 父子组件传值
    父传子组件<template><div><!--通过自定义属性传递值--><Subassembly:value="doc"/></div></template><scriptsetup>import{ref}from'vue'importSubassemblyfrom'./Subassembly.vue&#......
  • vue 存储cookie 与使用
    安装cookie依赖包npmi@vueuse/integrations安装cookienpmiuniversal-cookie使用cookieimport{useCookies}from"@vueuse/integrations/useCookies"constcookie=useCookies();存取cookiecookie.set("token","123456789")获取cookiecookie.......
  • vue table 没有数据的时候展示无数据
    element-table无数据的时候,把“暂无数据”改成其他文字或图片 <el-table :data="tableData" ><el-table-columnlabel="序号"prop="amount""min-width="80"align="center"><template#default="scope">......
  • vue-element-admin安装依赖报错问题
    前言vue-element-admin中文官网要使用中文版,直接去gitgithub下载包:https://github.com/PanJiaChen/vue-element-admin/tree/i18ngitee下载包:https://gitee.com/panjiachen/vue-element-admin/tree/i18n分支记得选择这个i18n问题解决1.修改package.json文件tui-editor这......