Vue (三)｜ element篇

文章已参与[新人创作礼]活动，一起开启掘金创作之路.

微信公众号：秀基宝。如有问题，请后台留言，反正我也不会听。

前言：我们最近使用的新框架表格是vxe-table，这个组件功能十分强大，但是我还不太熟，最终还是用element

这么一个功能：表格风琴样式展开详细界面

vue篇

<el-table
      :data="tableData"
      style="width: 100%"
      @expand-change="expandSelect"
      :row-key='getRowKeys'
      :expand-row-keys="expands"
    >
      <el-table-column type="expand">
        <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-column width="130" prop="receiptOrder" label="收货单号"/>
      <el-table-column width="85" prop="whCode" label="供应商号"/>
      <el-table-column width="130" prop="actualArrivaltime" label="实际到货时间"/>
      <el-table-column width="200" prop="operation" label="right">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)">{{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

解释： @expand-change="expandSelect" 点击事件 :row-key='getRowKeys' 获取当前行ID :expand-row-keys="expands" 当前行值

Node.js篇

data() {
      return {
        expands: [],
        getRowKeys(row) {
          return row.id
        },
      }
    },

// 折叠面板每次只能展开一行
      expandSelect(row, expandedRows) {
        // expandedRows.length = 0 为关闭，否则开启
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            that.expands.push(row.id)
          }
        } else {
          that.expands = []
        }
      },

本人开发的玩基金小工具

个人博客：
名称：纯洁的麦田
链接：[http://www.idearyou.cn/]
描述：争取哪一天做上架构师
公众号：纯洁的麦田

网址：[xiu.idearyou.cn]
谷歌插件搜：秀基宝
小程序：秀基宝
复制代码
复制代码
复制代码

后语

如果本文对你哪怕有一丁点帮助，请帮忙点好看。你的好看是我坚持写作的动力。 另外，关注免费学习。