antd-design-vue 树表联动 a-tree+a-table

最新推荐文章于 2024-09-07 16:06:50 发布

春晓_春眠花落

最新推荐文章于 2024-09-07 16:06:50 发布

阅读量3.2k

点赞数 1

分类专栏： antd-design-vue 文章标签： js

本文链接：https://blog.csdn.net/weixin_49668076/article/details/119755711

版权

antd-design-vue 专栏收录该内容

24 篇文章 3 订阅

订阅专栏

树表联动，每次点击树节点，刷新右侧列表的数据
在这里插入图片描述
首先是布局，display：flex布局，

左侧树

 <div class="left-card"  >
      <a-col :span="23">
        <a-tree
          :treeData="treeData"
          :replace-fields="replaceFied"
          @select="handleSelect"
        >
          <template slot="custom" slot-scope="item">
            <span
              >{{ item.name }}
              <span>({{ item.userCount }})</span>
            </span>
          </template>
        </a-tree>
      </a-col>
    </div>

右侧列表，因为项目中的列表经过封装，和文档上的不一样，所以列表可以按文档写，我的可能没有参考意义

      <a-table
        size="default"
        ref="table"
        rowKey="userId"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data="loadData"
        :pageSize="pageSize"
      >
        <span slot="status" slot-scope="text, record">
          <a-switch :checked="record.status == '0'" @change="onChangeStatus(record)" />
        </span>
        <span slot="discount" slot-scope="text, record" style="color:#F59A23">
          <div v-if="record.fDeDiscount == '0'">0</div>
          <div v-else>{{ (record.fDeDiscount * 100).toFixed() + '%' }}</div>
        </span>
        <span slot="action" slot-scope="text, record">
          <a v-if="editEnabel" @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm v-if="removeEnable" title="确认删除吗？" @confirm="delByIds([record.userId])">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a v-if="resetPwdEnabel" @click="resetPwd(record)">重置密码</a>
        </span>
      </a-table>

获取树数据，插槽使用的是自定义插槽，在获取到数据后赋值给this.treedata前定义scopedSlots

getTreeData() {
      treedatalist().then(res => {
        if (res && res.code == 200) {
          const scopedSlots = {
            title: 'custom'
          }             
          let arr1 = res.data.groupList  
          arr1.forEach(item => {
            item.scopedSlots = scopedSlots
            item.isPeople = false
          })
          this.treeData = this.dealTreedata([...arr1])
        }
      })
    },

树的选中事件里只要做两件事，把列表接口里的参数改为从树选中事件的参数打印后拿到的值，然后刷新列表。

 handleSelect(selectedKeys, info) {
 // console.log(selectedKeys, info, 'tree 选择')
       this.queryParam = {
          userId: selectedKeys[0],
        }
      this.$refs.table.refresh(true)
    }