急!!关于element-ui table 如何用按钮控制 使table的展开行 全部打开和隐藏? 10C

html:

控制按钮:

<el-button
    type="success"
    size="small"
    :icon="active?'el-icon-arrow-up':'el-icon-arrow-down'"
    @click="displaysubBond"
>展开</el-button>

主表+子表

 <el-table :data="bondList" height="550" style="width:90%" :default-expand-all="isExpand" border>
    <el-table-column type="expand">
        //可展开的子表
        <template slot-scope="props">
            <el-table :data="subBondList" border >
                <el-table-column></el-table-column>
                ……
            </el-table>
        </template>
    </el-table-column>
    <el-table-column></el-table-column>
</el-table>

script:

data(){
    return {
        isExpand:false
    }
}
displaySubBond() {
      this.active = !this.active;
      if (this.active) {
        console.log("展开");

        this.isExpand = true;
      } else {
        console.log("关闭");
        this.isExpand = false;
      }
    }

展开跟关闭都能显示到控制台上,但是子表就是不能展开,没有反应!
QAQ求解

2个回答

如果要动态控制,需要用expand-row方法


<el-table :data="tableData5" :row-key="getRowKeys" :expand-row-keys="expands">


// 获取row的key值
      getRowKeys (row) {
          return row.id
      },
      // 要展开的行,数值的元素是row的key值
      expands: []

当你需要展开的时候,往expands里面push对应的行的id

this.expands.push(this.tableData[1].id)
oyljerry
oyljerry 回复cWatermelon: 更新了,再看看
6 个月之前 回复
weixin_43551840
我爱吃西瓜喵 我添加了,没有用啊
6 个月之前 回复

你的意思是用按钮来控制表格的显隐吗?

qq_34953053
༺༂鑫༒海༂༻ 回复cWatermelon: 我是看到在element-UI文档中有这个样的效果的,你可以去看看!那个效果是点击一个表格可以折叠!也不知道你是不是要的这个效果
6 个月之前 回复
weixin_43551840
我爱吃西瓜喵 是的,点击按钮,使表格的展开项展开或关闭
6 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于element-ui table 用按钮控制 使table 全部打开和隐藏
1 首先要用到他的一个属性 row-key2 还有就是 expand-row-keys 第一步 &lt;el-button type="primary" @click="hangshou"&gt;全部显示&lt;/el-button&gt; &lt;el-button type="success" @click="hang...
关于element-ui table 用按钮控制 使table 全部打开和隐藏
关于element-ui table 用按钮控制 使table 全部打开和隐藏 1 首先要用到他的一个属性 row-key 2 还有就是 expand-row-keys 第一步 // An highlighted block &lt;el-button type="primary" @click="hangshou"&gt;全部显示&lt;/el-button&gt; &lt;el-but...
table 布局用slideToggle()展开和隐藏
//展开、隐藏代码     $(function(){         $("tr.parent").click(function() {             $(this).toggleClass('selected');             $(this).siblings('.child_' + this.id).slideToggle();         });  
element-ui table 实现表格展开行每次只能展开一行
https://www.cnblogs.com/qianjin888/p/10246108.html https://blog.csdn.net/katy_1/article/details/85113191 1、table 部分 :row-key='getRowKeys' :expand-row-keys=&quot;expands&quot; @expand-change=&quot;expandSelect&quot; ...
Element Table常用设置:展开行满足条件展开
&amp;lt;template&amp;gt; &amp;lt;div id=&quot;table2&quot;&amp;gt; &amp;lt;el-table :data=&quot;tableData5&quot; stripe row-key=&quot;id&quot; :expand-row-keys=&quot;expands&quot; @row-click=&quot;rowClick&quot; :row-
jquery控制页面的展开和隐藏
【jquery代码】 require(["jquery","validate","bootstrap","lhgcalendar"],function($) { $(function(){ $("form").validate(); });
关于element-ui table简单的封装
&lt;template&gt; &lt;div&gt; &lt;el-table :data="data" border stripe fit style="width: 100%"&gt; &lt;el-table-column v-for="(value, key) in header" :key='key...
如何用attachEvent动态的控制table的显示
要实现根据[b]选择的select的值对应显示相应的table[/b],为什么不能用?代码有错吗?rn[code="html"]rnrn rn rn rnrn rn rn table1rn table2rn rn rn rn rn rn 1rn rn rn 2rn rn rnrn[/code]rn用[b]CSS[/b]能实现吗?
如何用代码控制Table的行数
正在自学ASP.NET,我想实现的功能是:rn根据数据库中查出的记录的条数,动态的增加Table的行数,我没有用rnDataGrid这一类的列表控件。rnrn最好使能通过*.aspx.cs控制*.aspx来实现。rnrn已经郁闷好几天拉,高手指教!!
table 控制多行 显示与隐藏
开发过程中常遇到一个table中的一行或多行需要进行显示或隐藏控制。通常我们会想到给tr加个ID,这样做当然可以达要想要的效果,但重复代码太多,一般不用于多行的控制,对CSS有所了解的人这个时候就会想到用div来控制行了,但事实上,table中的div是只读的,它的style是不允许我们改变的,所以这个办法就失败了。所以最终的解决的办法是用tbody这个标签来实现div的效果。具体形式如下: &amp;...
▲★▲如何用代码控制下拉菜单的展开和收缩?
我想实现:当鼠标进入[下拉菜单]区时,菜单自动展开,鼠标离开时菜单自动收缩。
如何用客户端脚本控制Treeview的展开和折叠?
我想在选择一个第一层某一个节点时,自动折叠已经展开的其它第一层节点。rn因往返服务器端资源损耗过大,所以希望通过客户端脚本实现。rn有没有什么简单易行的办法??
关于javasript菜单的展开和隐藏?
rn rnrnrn rnrnrnrn rn 大学 rn rnrn rnrn rn rn大一 rn大二 rn大三 rn大四 rn rn rnrn 中学 rn rnrn rnrn rn rn rn初一 rn rn初二 rn rn初三 rn rn rnrn 小学 rn rnrn rnrn 一年级 rn 二年级 rn rn rn rn rn rnrn我想默认是展开大学这类的菜单的,怎么设呀?rn就是这里rn
隐藏TAble
$('td:nth-child(2),th:nth-child(2)').hide();
急!如何用正则表达式找出嵌套的table?
rn rn rn rn rn rn 内容 rn rn rn rn rn rn rn rn 内容2 rn rn rnrn请问,如何用正则表达式找出title为“123”的table?
求控制展开和关闭
做了了ComBoBox,使用input text和select实现的rnrn现在需要焦点在text的时间,展开select,请问有办法实现么
控制页面展开和关闭。
控制页面展开和关闭是用css完成的在html页面直接运行。实现页面控制文字的展开和关闭。在同一页面实现!
如何用按钮控制图片的显示和隐藏?
我想在同一帧上用按钮控制图片,单击后显示图片,再一次单击隐藏图片,如果图片的名称为a,按钮的动作代码应怎么写?
element-ui table展开行,设置type="expand",如何添加表头?如何去掉展开图标并设置成文字按钮?
1.element-ui官方文档上给我table展开行案例不是我想要的效果;rn2.我想要这种:点击“修改”按钮时,出现展开行rn[img=https://img-bbs.csdn.net/upload/201805/30/1527651524_766973.png][/img]rn请教各位大神,怎么去实现?
使用展开和收起处理table 表格列文本过长
# 场景: 在做后台页面时,经常用到表格,有时候表格列的内容过长,导致所在行拉的很高,严重影响美观性和可用性。 # 解决方案: 1. 不展示内容过长的列。如果没有必要可以不展示或者另放在一个详情页面,毕竟表格宽度有限,只需要展示关键列。 2. 截取展示,只展示内容的前几个字,比如20字,后面省略号,点击省略号展开详情,这种只适合中等长度的列。 3. 当内容实在很长,可以考虑使用弹出框加滚...
element-ui表格展开行每次只能展开一行
element-ui表格展开行每次只能展开一行代码: 代码: &lt;template&gt; &lt;el-table :row-key="getRowKeys" :expand-row-keys="expands" :data="tableData" :default-sort = "{prop: 'payment_date', order: 'desce...
关于element-ui中table组件的问题
[img=https://img-bbs.csdn.net/upload/201803/08/1520488837_648952.png][/img]rnrn上面红框部分,是要的效果,下面是我做出来的效果,代码如下:rn[code=javascript]rnrnrn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn[/code]rnrn各位大家帮忙看看,怎么才能实现成上面 的那种样式 ?
如何用javascripr动态添加table?
如何用javascripr动态添加table?
请问Table的Table.BeforePost如何用
我想在DBGrid中输入新的字段值后,并提交到数据库表时,如有字段重复,我想不提交到数据库,请问是不是在Table.BeforePost事件中设置,如何设置的?rn
TABLE的控制
rn注:TABLE是HTML选项卡中的控件。我想在后台控制TABLE中style的LEFT属性,请问各位大虾能不能控制啊?
element-ui table 实现单选 和 多选
一、单选实现: 1、table 部分 &amp;lt;el-table :data=&quot;tableData&quot; @row-click = &quot;showRow&quot; &amp;gt; 2、column 部分 &amp;lt;el-table-column label=&quot;选择&quot; width=&quot;50&quot; align=&quot;center&quot;&amp;gt; &amp;lt;tem
element-ui table表格动态列合并
前言 element-ui 1.0的时候没有表格合并的方法,这当时做表格合并的功能时候,非常头疼。2.0开始官方已经支持表格合并的方法,那怎么做到表格动态合并呢,还是直接看代码吧。 官方例子 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIn...
element-ui,table增加虚拟列表
参考文献https://juejin.im/entry/5aaf66f56fb9a028c71e403e 由于业务需要,当大批量的dom(10W个场景)展现在table中,会导致滚动条卡顿,因此需要开发一个虚拟列表的功能 原理:根据grid的高度,计算展现条数,通过css属性,transform中的translate(x,y)方法实现,将数据先保存至js的变量中,每次计算以后,slice数组中...
element-ui table 进行合并单元格功能
objectSpanMethod 方法 有4个参数 parameter row 行 column列 rowIndex行下标 columnIndex列下标 返回为 [行 要合并单元格的各数,列 要合并单元格的格数]
element-ui之table 选择框禁用
var Main = {   data() {     return {       tableData: [{           date: '2018',           name: '小海',           address: '上海市'         }, {           date: '2016',           name: '小北',           ad...
element-ui 自定义table表格样式
1.案例说明: vue项目中,使用element-ui,根据设计,更改table表格样式,包括表头、字体、背景色、边框、鼠标动作等; 2.案例图示: 3.案例代码 - 方法一: 4.案例代码 - 方法二: //自定义-表格样式 .table-text-blue{ color: $blueColor; cursor:pointer; } .table-text-...
element-ui table表格使用过滤器
html代码 可以通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据。 js 过滤器内容 以上两步就阔以实现element-ui table中灵活的使用过滤器...
element-ui中Table表格合并单元格
&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;el-table :data=&quot;tableData&quot; border :span-method=&quot;arraySpanMethod&quot; style=&quot;width: 100%&quot; &amp;gt; &amp;lt;el-table-column prop=&quot;id&
如何用按钮控制Iframe的显示和隐藏??急!!
请高手指点,如何在下面的网页中是用按钮控制每个ifrmae的显示和隐藏。rnrn急!!rnrn谢谢!rnrnrnrnrnrnrnrnrnrnrnrnrn
菜鸟关于隐藏table的问题
目的就是两个BUTTON,一个隐藏TABLE,一个显示。rn rn company personalrn rn rn rn rn rn rn rn rn rn rn rn
关于Table隐藏列的问题
ASP.NET后台创建的Table,某一列的隐藏与否是否有好办法可以控制?rnrn我查了很久,在标准HTML中有一个非常简洁的方案是用colgroup+col来定义的,但是一旦Table runat=server之后,这些标签就加不进去了。非常郁闷。MS真操蛋。rnrn如果不这么做,那我能想到的只有去控制该列的每一个单元格了,但是用脚拇指想想那也是个效率巨低的方案,而且还得监听是否有行增加事件来隐藏新增加出来的行中对应的单元格(Table还没有这个事件)。这样的方案我很难接受啊。rnrn各位大侠,有没有更好的方案,赐教!
关于隐藏的表格展开和隐藏状态判断的问题
如下代码:rn rnrnrn rn rn 展开/收起rnrnrnrn rn rn 353ddfdfdrnrnrnrn我想实现,当隐蔽的表格展开时,显示"收起"链接,当隐藏的表格隐藏时,显示"展开"链接..也就是如何判断隐藏的表格的状态,以显示不同的链接名称.跪求大虾们...感激不尽...
急急急!关于table
我要在table每一列的列名后面,加上一个三角形的箭头。请高手帮忙,今天老板要让骄,谢谢!
vue+elementui 表格展开行实现
&lt;template&gt; &lt;el-table :data="tableData" style="width: 100%"&gt; &lt;el-table-column type="expand"&gt; &lt;template slot-scope="props"&gt; &lt;el-form label-positio...
为什么我的table展不开?
比如在一个大的table里有多个项,每个项有二个单选框为"不展开"和"展开"rn选择展开,则会展开可供填写的小table,如"不展开",table则隐藏,问题是:rn当我打开多个项,并都选择了"展开",而有的项却因为上面或者下面展开的table而展不开来,而且如果不选择展开,其中不能展开的项仍展开不来,为什么会出现这种情况?又怎么样才能解决?如能解决,给分大大的. *^_^*
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法