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

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

lkF无知

相关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 数组中lkF无知

相关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: [],lkF无知

你可以在 created 中指定展开的行lkF无知

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

通常我们是在一个空节点上添加子节点的时候，需要默认展开这个节点，也就是在子节点添加成功之后调用。lkF无知

相关jslkF无知

        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 + '')lkF无知

注意

我这里使用了 this.cate.parentId + ''lkF无知

值得注意的是我们指定的 row-key="id" ，id 是数字类型的，但做为 row-key 的时候它被默认转换成了字符串类型，所以如果你 this.expandKeys.push(this.cate.parentId)，那是不会生效的。lkF无知

lkF无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2021-01-12/601.html

很赞哦！ () 赏 有话说 ()