美文网首页
Tree 树形控件 el-tree获取节点

Tree 树形控件 el-tree获取节点

作者: _孙小胖 | 来源:发表于2019-11-13 11:06 被阅读0次
    image
    <div class="Flex inputbox">
        <label for class="post Flex">
          <span style="line-height:.4rem;">岗位编号:</span>
          <el-input v-model="jobsNumbers" :disabled="true"></el-input>
        </label>
        <label for class="Flex post">
          <span style="line-height:.4rem;">岗位名称:</span>
          <el-input placeholder="请输入岗位名称" v-model="jobTitle" clearable class="post"></el-input>
        </label>
        </div>
        <div class="Flex text inputbox" style="text-align:top;">
        <label for class="post Flex">
          <p class="responsibility" style>岗位职责:</p>
          <el-input
            type="textarea"
            placeholder="请输入岗位职责"
            cols="100"
            rows="3"
            v-model="jobResponsibilities"
          ></el-input>
        </label>
    </div>
    <!-- 节点树 -->
    <el-tree
      :data="positionData"
      :props="defaultProps"
      ref="tree"
      accordion
      @node-click="submitForm"
      style="overflow-x: auto;overflow-y: auto;"
    ></el-tree>
    

    tree数据

    data(){
        return{
            positionData: [
                {
                    id: "1",
                    label: "系统管理员",
                    addAble: false,
                    delAble: false
                },
                {
                  id: 2,
                  label: "董事长",
                  addAble: false,
                  delAble: false,
                  children: [
                    {
                        id: "2-1",
                        label: "职能部门",
                        addAble: false,
                        delAble: false,
                        children: [
                            {
                              id: "2-2",
                              label: "3-1",
                              addAble: false,
                              delAble: false
                            }
                        ]
                    }
                  ]
                },
                {
                    id: 3,
                    label: "生产经营部",
                    addAble: false,
                    delAble: false,
                    children: [
                        {
                          id: "3-1",
                          label: "彩涂车间主管",
                          addAble: false,
                          delAble: false
                        }
                    ]
                }
            ],
        }
    }
    

    input获取数据

    methods:{
        submitForm: function(data, node, attr) {
            let jobsNumbers = true;
            let jobTitle = true;
            this.jobTitle = data.label;
            this.jobsNumbers = data.id;
        },
    }
    

    相关文章

      网友评论

          本文标题:Tree 树形控件 el-tree获取节点

          本文链接:https://www.haomeiwen.com/subject/pekhictx.html