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

微wx笑 2021-01-12【前端开发】366 9 0关键字： 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
        }