美文网首页
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