Vue+Element UI表格列的显示和隐藏

如下代码：

<template><div><el-table:data="tabledate"height="400">//使用v-if else 控制两列的显示和隐藏，每个列必须加唯一标识符:key="Math.random()"，否则会不起作用，无法控制显示与隐藏<el-table-column type="selection" width="50" v-if="showColumn==true" :key="Math.random()"></el-table-column><el-table-column label="序号" prop="id" v-else :key="Math.random()"></el-table-column><el-table-column label="英文名" prop="value"></el-table-column><el-table-column label="中文名" prop="label"></el-table-column></el-table><el-button plain style="width:100px" @click="showColumn=true">显示</el-button><el-button plain style="width:100px" @click="showColumn=false">隐藏</el-button></div>
</template><script>
export default {name: "TableColumnShowHideDemo",data() {return {table_interval: null,//控制列的显示和隐藏showColumn: false,tabledate: [{ id: "1", value: "right", label: "正确" },{ id: "2", value: "wrong", label: "错误" },{ id: "3", value: "rightorwrong", label: "正确or错误" },{ id: "4", value: "right", label: "正确" },{ id: "5", value: "wrong", label: "错误" },{ id: "6", value: "rightorwrong", label: "正确or错误" },{ id: "7", value: "right", label: "正确" },{ id: "8", value: "wrong", label: "错误" },{ id: "9", value: "rightorwrong", label: "正确or错误" },{ id: "10", value: "right", label: "正确" },{ id: "11", value: "wrong", label: "错误" },{ id: "12", value: "rightorwrong", label: "正确or错误" },{ id: "13", value: "right", label: "正确" },{ id: "14", value: "wrong", label: "错误" },{ id: "15", value: "rightorwrong", label: "正确or错误" }]};},methods: {}
};
</script>

Vue+Element UI表格列的显示和隐藏相关推荐

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )
最终效果如下页面只需要设置两个参数(适用于element及antd) columnSetting // 是否显示列设置按钮 // name="TtableColumnSet" / ...
antd表格列自定义显示与隐藏
效果图: 相关定义: ckValues: [], //checkgroup设置值chkAll: true, //全选indeterminate: false, //模糊状态poped: false / ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
vue element ui表格下载成xlsx工作表格
我们需要两个依赖打开项目终端输入 npm i file-saver -S 和 npm i xlsx -S 在需要使用的组件中引入依赖 import FileSaver from 'file-sav ...
Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

Vue+Element UI表格列的显示和隐藏

Vue+Element UI表格列的显示和隐藏相关推荐

最新文章

热门文章