el-select和el-tree一起用

本文主要是介绍el-select和el-tree一起用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

html代码

<el-form-item label="树型结构" >
  <el-select
    v-model="treeData"
    placeholder="请选择..."
    style="width: 16rem"
  >
    <el-option
      :value="treeDataValue"
      style="height: auto"
    >
      <el-tree
        ref="tree"
        :data="data"
        default-expand-all
        node-key="id"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </el-option>
  </el-select>
</el-form-item>

js代码

<script>
export default {
  data() {
    return {
      treeData: "",
      treeDataValue: "",
      data: [
        {
          id: 1,
          name: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
            },
          ],
        },
        {
          id: 2,
          name: "一级 2",
          children: [
            {
              id: 5,
              name: "二级 2-1",
            },
            {
              id: 6,
              name: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          name: "一级 3",
          children: [
            {
              id: 7,
              name: "二级 3-1",
            },
            {
              id: 8,
              name: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {　　
　　handNodeClick(data,node,nodeData){
　　　　this.treeDataValue= data
　　　　this.treeData= data.name
　　}
　},
};
</script>>

这篇关于el-select和el-tree一起用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！