elementUI table隐藏行

项目中遇到一个问题，就是数组中的全部内容左侧需要全部展示，右侧列表中又需要部分展示，所以右侧把不需要展示的部分隐藏掉，看了文档才发现可以实现这个内容
官方文档有说明

<template><el-table border :data="editor.result" stripe style="width: 100%" :row-class-name="tableRowClassName"><el-table-column prop="name" label="设备名称" align="center"></el-table-column><el-table-column label="靶机列表" align="center"><template slot-scope="scope"><el-select v-model="scope.row.targetId" placeholder="选择靶机" filterable :disabled="vis"><el-option v-for="(it, i) in targetList" :key="i" :value="it.id" :label="it.targetName"></el-option></el-select></template></el-table-column></el-table>
</template>
<script>
//只需要把type='device'的展示，type='area'的隐藏掉tableRowClassName({ row, rowIndex }) {if (row.type == "area") {return 'hidden_box'  //可以动态添加class样式}return ''}
</script>
<style>
//这的style不能加scoped，否则class名添加不上.el-table .hidden_box {display: none;}
</style>

elementUI table隐藏行相关推荐

Vue Element-ui table隐藏表头勾选框，多选框改单选框
在table中添加class = "table-style" 在style里添加样式 .table-style /deep/ .el-table-column--selectio ...
element-ui table表格行合并、标红及数据转换
先看下效果看下后端返回的数据格式,首先分析下数据结构,maxstatis,minstatis,avgstatis,passtatis是上图表格的四行数据,titles是表 ...
elementUI table表格行添加点击事件
1.table 事件 2.使用方法 <el-table :data="popBusinessData" border style="margin-top: 10px ...
element-ui table可选行表格的跨页选中不清除上一页的数据+将选中数据显示到页面的跨页联动
第一步:介绍table自带的两个属性这两个属性配合使用,可以保留上一页选中的数据第二步:将选中的数据放到一个SelectData中,包括数据所在的页数.数据在所在页的index下角标和需要显示在页 ...
ElementUI table的行高设置
... <el-table:data="tableData"style="width: 100%":row-style="{height: '8 ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码
最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染 ...
jquery控制table的行显示和隐藏
jquery控制table的行显示和隐藏一.开发记录我们经常会遇到需要在html中控制元素进行隐藏或显示的场景: 隐藏: $('#id').css('display','none'); 显示: $ ...
elementui的table展开行显示另一关联子table表的数据
需求:主表table可实现展开行显示关联子table的列表数据 <div class="table-box"><el-tableref="enquir ...

elementUI table隐藏行

elementUI table隐藏行相关推荐

最新文章

热门文章