使用element-ui中table expand展开行控制显示隐藏

时间: 2019-08-07阅读: 1433标签: element

问题讲解:

在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table的常用功能示例代码提供的不是非常详细,所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 
先展示一下ElementUI官方提供的示例代码效果图


可以看到官方代码中在这边没有让这个可展开table自动折叠的功能,我点击了别的标签页后上次点击的行仍旧处在一个展开的状态,而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态,体验不是特别好,可以说有点糟糕了,但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion,这个方法应该是官方本意上想让我们来自由控制展开状态的,从传递的两个参数来看,一个是row(当前点击的行id),另一个是expended(行展开状态,boolean值),看上去有理有据,但是就是不知道怎么用,因为我始终无法获取到expended这个参数的值,有点气,所以这次我们用另一种方式来实现这个功能。

<template>
  <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
    <el-table-column label="商品 ID" prop="id" width="100">
    </el-table-column>
    <el-table-column label="商品名称" prop="name">
    </el-table-column>
    <el-table-column label="描述" prop="desc">
    </el-table-column>
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
    <el-table-column type="expand" width="1">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData5: [{
        id: '1',
        name: '好滋好味鸡蛋仔1',
        desc: '荷兰优质淡奶,奶香浓而不腻1',
      }, {
        id: '2',
        name: '好滋好味鸡蛋仔2',
        desc: '荷兰优质淡奶,奶香浓而不腻2',
      }, {
        id: '3',
        name: '好滋好味鸡蛋仔3',
        desc: '荷兰优质淡奶,奶香浓而不腻3',
      }, {
        id: '4',
        name: '好滋好味鸡蛋仔4',
        desc: '荷兰优质淡奶,奶香浓而不腻4',
      }]
    };
  },
  methods: {
    toogleExpand(row) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row)
    }
  }
}
</script>

我们一般会点击按钮去展开查看详情,所以我们替换箭头为“查看详情”按钮,通过toggleRowExpansion方法展开合闭expand。效果如图:


因为我设置了<el-table-column type="expand" width="1"></el-table-column> 会多出1px的边距,所以我们可以再在最外层放一个空的div,设置样式overflow:hidden;
再设置此table的样式margin-left:1px;好了,完美实现。

放上项目最终的效果图,无多出的1px边框。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5183

关闭

element-ui合并单元格

例如一个时间段下对应多行数据,这就不免就涉及到了单元格合并,为每一个时间段下的 每一行 数据中都添加上对应的时间段数据 ,设定一个数组来存放要合并的格数

element ui tree控件父节点和子节点之间的关联问题

问题描述:当需改的时候如果父节点为选中状态子节点不是全选中这样会显示为子节点为全选中状态;在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false ;

监听element-ui table滚动事件

做管理平台的项目,用到了element-ui,需要通过监听el-table滚动的位置来获取最新的数据,那么怎么样监听el-table的滚动呢?我们默认的技术栈是 vue+element-ui

elementui日期范围选择器_范围限制

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官方文档也很详细,这里记录一个element-ui日期插件的范围限制

Element ui 表格不对齐的解决方法

当固定头部时有时候表格不对齐,第一种情况:没有水平滚动条,只有垂直滚动条;第二种情况:有垂直滚动条也有水平滚动条,特别是水平滚动条拖动到右边时,表格不对齐更明显

elementui enter事件_在vue的element-ui下的el-input如何监听enter事件

在选择element-ui组件做开发的时候,发现直接使用@keyup.enter的形式监听不到回车事件,原因是element-ui自身封装了一层input标签,把原有的事件隐藏了。解决方法是:在enter后面加上.native

使用mixins,实现elementUI表单的全局验证

使用ElementUi搭建框架的时候,大家应该都有考虑过怎么做全局验证,毕竟复制粘贴什么的是最烦了,一般验证规则,主要是是否必填,不为空,以及参数类型的验证。

vue-element Tree树形控件

通过tree树形控件的default-checked-keys属性来设置默认选中的节点,Tree树形控件通过后台接口获取到数组数据,还需要再次遍历,将它再遍历为数组,这样我们才可以调用

Js:element的模糊查询

在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用 但上次的项目中 又涉及到不试用插件的模糊搜索

如何让Element UI的Message消息提示每次只弹出一个?

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示,但是公司的测试人员在进行测试时会一直点,然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!