zoukankan      html  css  js  c++  java
  • element树形控件单选

    <template>
      <div id="">
        <el-tree
          id="radio"
          ref="treeForm"
          :data="treeInfo"
          :props="defaultProps"
          node-key="id"
          show-checkbox
          check-strictly
          @check-change="handleNodeClick1"
        />
      </div>
    </template>

    <script>
    export default {
      name: 'TreeRadio',
      props: ['toChildrenData'],
      // 要展示的信息
      data() {
        return {
          checkedId: '', // 当前点击的节点ID
          treeInfo: [], // 获取到的树形结构
          defaultProps: { // 树形结构的校验规则
            children: 'childOrgList',
            label: 'name'
          },
          params: {
            organExist: '', // 判断机关是否存在 1是存在 0是不存在
            miniUnit: '' // 选择人员层数
          }
        }
      },
      created() {
        this.getInfo()
      },
      // 添加事件的地方
      methods: {
        async getInfo() {
          this.params = this.toChildrenData
          await selectInfo(this.params).then(data => {
            this.treeInfo = data.data
          // eslint-disable-next-line handle-callback-err
          }).catch((err) => { return false })
        },
        // @check-change  节点选中状态发生变化时的回调
        // 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
        handleNodeClick1(data, checked, node) {
          if (checked === true) {
            this.checkedId = data.id
            this.$refs.treeForm.setCheckedKeys([data.id])
          } else {
            if (this.checkedId === data.id) {
              this.$refs.treeForm.setCheckedKeys([data.id])
            }
          }
        }
      }

    }
    </script>

    <style>
    #radio .el-checkbox__inner {
      border-radius: 50%;
    }
    </style>
  • 相关阅读:
    SE78添加图片,比如smartforms用的…
    Smartforms
    将文件上传到FTP服务器
    【转自ITPUB】SYNONYM关于underlying table权限的小小发现
    alter session set current_schema=Schema
    exportDISPLAY=:0.0的解释
    如何通过使用Xmanager的图形化界面修改系统
    Xms Xmx PermSize MaxPermSize 区别
    oracle中schema指的是什么?
    oracle表空间查询
  • 原文地址:https://www.cnblogs.com/maxiag/p/14071804.html
Copyright © 2011-2022 走看看