el-tree从后端获取的数据并默认勾选,前后端交互

展示代码:方便理解,代码上附上注释。

<div class="block">
              <el-tree
//展示的数据
              :data="treedata"
//展示数据的自定义格式,可不写,不写就是默认按官方文档的格式
              :props="defaultProps"
//节点是否可被选择,默认为false,即一开始都没被勾选
              show-checkbox 
//自己数据的唯一标识符
              node-key="primaryId"
//默认被勾选的数据,一个(node-key)primaryId数组[1,4,6..],不理解看下后面的数据格式就明白了
              :default-checked-keys="tickdata"
//是否默认展开所有节点,默认为false,即一开始节点都没展开
              default-expand-all
//点开该节点就展示该节点下的所有子节点
              :expand-on-click-node="false"
              ref="tree">
            </el-tree>
</div>

无注释,方便复制粘贴。

<div class="block">
              <el-tree
              :data="treedata"
              :props="defaultProps"
              show-checkbox 
              node-key="primaryId"
              :default-checked-keys="tickdata"
              default-expand-all
              :expand-on-click-node="false"
              ref="tree">
            </el-tree>
</div>

JS代码:

export default {
data() {
      return {
        //展示的所有数据
        treedata: [],
        //被勾选的primaryId数组
        tickdata: [],
        defaultProps: {
               children: 'children',
               label: 'label',
               primaryId:'primaryId'
                      },
             },
        userId: ''
    },
created() {
      this.getTreeData()
      this.getTickData()
    },
methods: {
       //从后端获取treedata的方法,根据自己需求写
       getTreeData() {
        axios.get(`${baseURL}/tree/getTreeData?userId=0`).then(({
          data
        }) => {
          this.treedata = data
        })
        },
       //从后端获取tickdata的方法,根据自己需求写
       getTickData() {
        axios.get(`${baseURL}/tree/getTickData?userId=`+this.userId).then(({
          data
        }) => {
          this.treedata = data
        })
        },
        

}
}
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coca可口

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值