账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    elementui树形组件自定义渲染问题
    40
    0

    element-ui自定义节点内容渲染的时候我要用一个switch组件,但是switch组件需要绑定一个boolean值,无论是通过renderContent (h, { node, data, store }) {}中的data还是外层data都无法取到值。通过console.logrenderContent(h, { node, data, store })data中的值,发现只能取到一次该值。

     <el-tree
        :data="data4"
        :props="defaultProps"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent">
    </el-tree>
         data () {
        return {
          dialogFormVisible: false,
          cdAddress: '',
          cdName: '',
          data4: [{
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }],
            value1: true,
            value2: true
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
            //   value1:true,
            //   value2:true
          }
        }
      },
    methods: {
    renderContent (h, { node, data, store }) {
          let _this = this
          console.log('*****************' + data.value1)
          return (
            <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 18px;">
              <span>
                <span>{node.label}<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }><span style="font-size: 20px;">+</span></el-button></span>
              </span>
              <span style="margin-right: 50px;">
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.bianji(data) }>编辑</el-button>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
              </span>
              <span>
                  <el-switch
                      v-model="data.value1"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                  </el-switch>
              </span>
            </span>)
        }
    }

    打印出来的结果是

    *****************true
    *****************undefined
    *****************undefined
    3
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 尤忘、记忆】 普通会员 1楼

      在Element UI中,树形组件的自定义渲染可能会遇到一些问题,比如:

      1. 混合数据:如果你在树组件的子元素中混合了数据,那么在父元素的渲染函数中,数据可能无法正确渲染。

      例如:

      ```html

      ```

      1. 模板渲染问题:如果树的组件是异步渲染的,那么在父元素的渲染函数中,数据可能无法正确渲染。

      例如:

      ```html

      ```

      为了解决这些问题,你可以尝试以下方法:

      1. 使用自定义属性或事件来传递数据到父元素,然后在父元素的渲染函数中根据这个数据进行渲染。

      2. 使用v-ifv-show来控制树的渲染状态。

      3. 使用异步渲染和事件循环来处理数据的获取和渲染。

      4. 使用async/await来处理异步数据的获取和渲染。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部