首页 > 其他分享 >vue-elementui中el-table跨页选择和v-if导致列错乱/选择框无法显示

vue-elementui中el-table跨页选择和v-if导致列错乱/选择框无法显示

时间:2024-06-03 11:23:06浏览次数:18  
标签:el selection elementui 选择 vue key table 属性

在vue-elementui中使用el-table,当type="selection"的时候,分页数据进行不同页跳转选择

需要这种功能的时候我们需要在el-table的标签上为每个el-table-column都创建一个id;所以就用到

了row-key="id"这个属性;然后我们就需要在el-table-column为type="selection"添加一个属性

reserve-selection;当这两个属性同时使用时就能实现我们的需求不能重置我们的选择

总结一下:跳转页不重置我们的选择

1、row-key="id"

2、reserve-selection

当然你想要获取到选择的数据就需要用到selection-change的这个方法了

接下来咱们说一说这个el-table-column上面使用v-if指令的问题

当我们的每一列错开使用v-if或者判断的时候我们会发现明明排好的列会随意的变动,这个时候我

们就需要注意一个属性了,就是这个key属性,这个key属性能帮我们排好序,不会让我们使用v-if

或者v-show的时候造成列的错乱

标签:el,selection,elementui,选择,vue,key,table,属性
From: https://www.cnblogs.com/alioth01/p/18228417

相关文章

  • vue 代码块
    一、代码块vue2.0安装依赖$npminstallvue-highlightjshighlight.js--save配置导入main.jsimportVueHighlightJSfrom'vue-highlightjs';import'highlight.js/styles/default.css';//选择你想要的样式//使用插件Vue.use(VueHighlightJS);具体使用<t......
  • vue 动态表单
    一、动态表单数据集1、原始数据集varjson="[{\"key\":\"id\",\"text\":\"id\"},{\"key\":\"name\",\"text\":\"姓名\"},{......
  • python对excel文件中指定表格的指定列数据进行去重复操作。
    importpandasaspd#读取Excel文件df_all=pd.read_excel('域名管理系统.xlsx',sheet_name=None,engine='openpyxl')#确保'01流水'表存在if'01流水'indf_all:#提取第1列第2行至第1000行的数据并去重df_two=df_all['01流水']un......
  • Honeywell CC-PFB401 控制器 电源模块系统备件
    HoneywellCC-PFB401控制器电源模块系统备件是一款专为工业自动化系统设计的备品备件。以下是关于该备件的详细信息和特点:基本信息品牌:Honeywell型号:CC-PFB401类型:控制器电源模块系统备件技术规格工作电压:24VDC输出频率:30Hz处理速度:15Hz程序容量:3MB数据容量:1MB认证......
  • ELK日志定期清理 ES索引数据
    ELK清理ES索引数据 这个是清理前十天的索引信息,只保留十天的索引日志 目前我是手动执行的脚本、如有需要可以自行添加定时任务#!/bin/bash#sticsearch的基本信息ES_HOST="127.0.0.1"ES_PORT="9200"ES_USER="elastic"ES_PASS="slastic"#获取当前日期......
  • 执行 delete from t1 where id = 10;MySQL会加什么锁?
    思考一个问题:下面一条简单的SQL,它加什么锁?deletefromt1whereid=10;带着你的答案,我们继续往下看。如果要分析上述SQL的加锁情况,必须了解这个SQL的执行前提,MySQL的隔离级别是什么?id列是不是主键?id列有没有索引?前提不同加锁处理的方式也不同。可能的情况:id列是不是主键?My......
  • Vue.js - 生命周期与工程化开发【0基础向 Vue 基础学习】
    文章目录Vue的生命周期Vue生命周期的四个阶段Vue生命周期函数(钩子函数工程化开发&脚手架VueCLI**开发Vue的两种方式:**脚手架目录文件介绍项目运行流程组件化开发&根组件App.vue文件(单文件组件)的三个组成部分普通组件的注册使用局部注册的方法全局注册的方法......
  • Shell 脚本演示 Linux 中的 Wait 命令
    Wait命令是进程管理命令之一。Linux中有不同的进程命令,主要使用5个命令,它们是ps、wait、sleep、kill、exit。ps是进程状态的缩写。它显示有关活动进程的信息。wait命令将暂停调用线程的执行,直到其子进程之一终止。它将返回该命令的退出状态。sleep命令用于将下一个命令的执行......
  • Shell阶段10 awk工作原理, 内部变量, 正则/比较/条件/逻辑表达式, 判断语句, 循环语
    AWK什么是awkawk是一个编程语言主要作用:对文本和数据的处理awk处理数据的流程1.扫描文件内容,从上到下进行扫描,按照行进行处理2.寻找匹配到的内容,进行读取到特定的模式中,进行行处理3.行满足指定模式动作,则输出到屏幕上面,不满足丢弃4.接着读取下一行继续处理,接着循环,直......
  • 为什么选择 Vue 3?
    专栏目录《Vue3基础》文章目录专栏目录前言一、Vue是什么?Vue是什么?Vue的三个特点1、组件化架构2、响应式编程3、学习成本低Vue生态适用场景横向比较二、为什么选择Vue3?Vue2.x和Vue3.x的主要区别Vue3升级指南总结前言随着互联网行业的不断发展,......