Vue + element ui el-tree 自定义节点内容 checkbox 回显后无法重新勾选问题

业务需求:左边是正常tree的展示,里面是我们各个板块的内容,右边呢是做一个权限配置。后台数据里面权限配置是分别给了我三个字段,1是勾选0是不勾选。但是这三个的逻辑是要么都不勾选,要么只能勾选其中一个。

于是我根据element ui的文档,参考了tree自定义节点内容的部分,使用 render-content方法来添加右边这块。

<el-tree
    ref="tree"
    v-loading="loading"
    :data="tableData"
    show-checkbox
    node-key="uuid"
    draggable
    default-expand-all
    :default-checked-keys="defaultCheckKeys"
    :props="defaultProps"
    :render-content="renderContent"
    :expand-on-click-node="false"
    :check-on-click-node="false"
    :allow-drop="allowDrop"
    @check-change="checkChange"
    @node-drop="dragDrop"
/>

右边因为有不勾选和三选一状态,我就选择checkbox来实现。

先看看我的错解:

我最开始的思路大概是在每一行的data数据中,我另外新增一个radio字段,它等于1的话是所有权限、2是修改、3是只读、0是啥都不选。

<el-checkbox v-model={data.radio} true-label={1} false-label={0}>所有权限</el-checkbox>
<el-checkbox v-model={data.radio} true-label={2} false-label={0}>修改</el-checkbox>
<el-checkbox v-model={data.radio} true-label={3} false-label={0}>只读</el-checkbox>

但是有一个问题,跑起来之后发现回显成功的几行无法再勾选其他选项,完全动不了,但是最开始没有默认选项的确是正常可用的。后来发现是我在开始如果自己手动声明了data.radio的话就无法正常操作,但是开始不声明,是undefined然后靠选择之后自动声明的就正常。

renderContent(h, { node, data, store }) {
      // 选择不同的right之后刷新data
      if (data.radio === 1) {
        data.rw = 1
        data.edit = 0
        data.r = 0
      } else if (data.radio === 2) {
        data.rw = 0
        data.edit = 1
        data.r = 0
      } else if (data.radio === 3) {
        data.rw = 0
        data.edit = 0
        data.r = 1
      } else if (data.radio === 0) {
        data.rw = 0
        data.edit = 0
        data.r = 0
      }
      // 根据data显示选择的right
      if (data.rw === 1) {
        data.radio = 1
      } else if (data.edit === 1) {
        data.radio = 2
      } else if (data.r === 1) {
        data.radio = 3
      }
      return (
        <span class='custom-tree-node'>
          <span>{data.label}</span>
          <span class='righter'>
            <el-checkbox v-model={data.radio} true-label={1} false-label={0}>所有权限</el-checkbox>
            <el-checkbox v-model={data.radio} true-label={2} false-label={0}>修改</el-checkbox>
            <el-checkbox v-model={data.radio} true-label={3} false-label={0}>只读</el-checkbox>
          </span>
        </span>)
    },

和同事看了半天两脸懵逼,感觉和vue绑定数据监视数据变化的原理可能有关系吧…暂时也不是很明白为什么。后来看到checkbox有个checked元素,于是不再靠提前声明radio来回显,而是使用checked来做回显。修改后满足需求正常运行。

修改后代码:

renderContent(h, { node, data, store }) {
      // 选择不同的right之后刷新data
      if (data.radio === 1) {
        data.rw = 1
        data.edit = 0
        data.r = 0
      } else if (data.radio === 2) {
        data.rw = 0
        data.edit = 1
        data.r = 0
      } else if (data.radio === 3) {
        data.rw = 0
        data.edit = 0
        data.r = 1
      } else if (data.radio === 0) {
        data.rw = 0
        data.edit = 0
        data.r = 0
      }
      return (
        <span class='custom-tree-node'>
          <span>{data.label}</span>
          <span class='righter'>
            <el-checkbox v-model={data.radio} true-label={1} false-label={0} checked={data.rw === 1}>所有权限</el-checkbox>
            <el-checkbox v-model={data.radio} true-label={2} false-label={0} checked={data.edit === 1}>修改</el-checkbox>
            <el-checkbox v-model={data.radio} true-label={3} false-label={0} checked={data.r === 1}>只读</el-checkbox>
          </span>
        </span>)
    },

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值