前端开发您现在的位置是:首页 > 博客日志 > 前端开发

element-ui el-table js控制表格行展开和折叠

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-01-12 11:07:30前端开发人已围观关键字: element-ui  el-table  js  表格  展开  折叠  

通常我们是在一个空节点上添加子节点的时候,需要默认展开这个节点,也就是在子节点添加成功之后调用,但是这里面有一个值得注意的地方,否则不会生效!

element-ui el-table js控制表格行展开和折叠7WT编程技术_踩坑日志_进阶指南_无知人生


7WT编程技术_踩坑日志_进阶指南_无知人生

相关html

    <el-table :data="list" style="width: 100%;margin-top:30px;" :expand-row-keys="expandKeys" :default-sort="{prop: 'orderNo', order: 'ascending'}" :row-style="rowStyle" row-key="id" lazy border :load="loadChild" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          {{ scope.row.id }}
          <!-- <template v-if="scope.row.parentId === 0">
            <el-button icon="el-icon-caret-right" size="mini" circle @click="handleExpend(scope.row, $event)" />
          </template>
          <template v-else>
            <el-button icon="el-icon-caret-bottom" size="mini" circle @click="handleExpend(scope.row, $event)" />
          </template> -->
        </template>
      </el-table-column>
      <el-table-column align="center" label="栏目编码" width="150">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="栏目名称" width="200">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

这里使用 :expand-row-keys="expandKeys" 记录展开的行的key到 expandKeys 数组中7WT编程技术_踩坑日志_进阶指南_无知人生

相关js

export default {
  // components: { Pagination },
  data() {
    return {
      cate: Object.assign({}, defaultCate),
      routes: [],
      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      tableKey: 0,
      list: [],
      expandKeys: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        limit: 10
      },
      importanceOptions: [1, 2, 3],
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false
    }
  },

默认初始为空,没有展开的行 expandKeys: [],7WT编程技术_踩坑日志_进阶指南_无知人生

你可以在 created 中指定展开的行7WT编程技术_踩坑日志_进阶指南_无知人生

  created() {
    // Mock: get all routes and cates list from server
    // this.getRoutes()
    this.getList()
    this.expandKeys.push(this.cate.parentId + '')
  },

通常我们是在一个空节点上添加子节点的时候,需要默认展开这个节点,也就是在子节点添加成功之后调用。7WT编程技术_踩坑日志_进阶指南_无知人生

相关js7WT编程技术_踩坑日志_进阶指南_无知人生

        const { data } = await addCate(this.cate)
        // // console.log(data)
        this.cate = data
        if (this.cate.parentId && this.cate.parentId > 0) {
          for (let index = 0; index < this.list.length; index++) {
            if (this.list[index].id === this.cate.parentId) {
              if (!this.list[index].children) {
                this.list[index].children = []
              }
              this.list[index].hasChildren = true
              this.list[index].children.push(this.cate)
              // this.expandKeys = []
              this.expandKeys.push(this.cate.parentId + '')
              console.log(this.expandKeys)
              break
            }
          }
        } else {
          this.cate.id = data.id
          this.list.push(this.cate)
          this.total += 1
        }

在一个空节点上添加子节点的时候,添加成功之后,首先是修改 hasChildren = true ,然后是添加子节点 children.push(this.cate),最后设置展开的行 this.expandKeys.push(this.cate.parentId + '')7WT编程技术_踩坑日志_进阶指南_无知人生

注意

我这里使用了 this.cate.parentId + ''7WT编程技术_踩坑日志_进阶指南_无知人生

值得注意的是我们指定的 row-key="id" ,id 是数字类型的,但做为 row-key 的时候它被默认转换成了字符串类型,所以如果你 this.expandKeys.push(this.cate.parentId),那是不会生效的。7WT编程技术_踩坑日志_进阶指南_无知人生


7WT编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()