vue树形折叠表单面板，多级递归级联小组件

小鱼儿 2023-10-07 20:27 85阅读 0赞

效果展示：支持折叠和多级折叠

![9e6ff207040543a6a440512211e8a7ee.png][]

折叠起来的效果：

![50a2c1d66abf49d68e886daafba9b95e.png][]

小组件代码：

<template>
      <div class="fields">
        <div
          v-for="item in fields"
          :key="item.id"
        >
          
          <template v-if="item.children ? item.children.length > 0 : false">
            <div>
              <el-collapse
                v-model="activeNames"
                @change="handleChange"
              >
                <el-collapse-item :name="item.id">
                  
                  <template slot="title">
                    <span class="title">{
       {item.key}}</span>
                    <el-tooltip
                      :content="item.name"
                      effect="dark"
                      placement="top"
                    >
                      <span class="el-icon-warning-outline"></span>
                    </el-tooltip>
                  </template>
                  
                  <div>
                    <MyCollapse :fields="item.children"></MyCollapse>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </template>
          
          <template v-else>
            <div class="field-input">
              <div>
                <span class="title">{
       {item.key}}</span>
                <el-tooltip
                  :content="item.name"
                  effect="dark"
                  placement="top"
                >
                  <span class="el-icon-warning-outline"></span>
                </el-tooltip>
              </div>
              <input
                type="text"
                class="input"
              >
            </div>
          </template>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'MyCollapse',
      props: {
        fields: {
          type: Array,
          default: () => []
        }
      },
      data() {
        return {
          activeNames: ['1']
        }
      },
      methods: {
        handleChange(val) {
          console.log(val)
        }
      }
    }
    </script>
    
    <style scoped>
    .fields {
      width: 350px;
    }
    
    .title {
      margin-right: 6px;
    }
    
    .field-input {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      font-size: 13px;
    }
    </style>

在父组件中引用：

<template>
      <div id="app">
        <MyCollapse :fields="myfields"></MyCollapse>
      </div>
    </template>
    
    <script>
    import MyCollapse from './views/collapse'
    
    export default {
      name: 'App',
      components: {
        MyCollapse
      },
      data() {
        return {
          myfields: [
            {
              order: 1,
              key: 'task_types',
              name: '任务类型',
              sub_key: 'tree_params',
              sub_name: null,
              type: 'str',
              children: [
                {
                  order: 11,
                  key: 'max_depth',
                  name: '任务类型',
                  sub_name: null,
                  type: 'str',
                  children: []
                },
                {
                  order: 22,
                  key: 'min_sample_split',
                  name: '任务类型',
                  sub_name: null,
                  type: 'str',
                  children: []
                },
                {
                  order: 33,
                  key: 'min_child_weight',
                  name: '最小的孩子权重',
                  sub_name: null,
                  type: 'str',
                  children: [
                    {
                      order: 44,
                      key: 'subsample_feature_rate',
                      name: '子简单将来速率',
                      sub_name: null,
                      type: 'str',
                      children: []
                    },
                    {
                      order: 55,
                      key: 'calculator_param',
                      name: '随机速率',
                      sub_name: null,
                      type: 'str',
                      children: []
                    }
                  ]
                }
              ]
            },
            {
              order: 2,
              key: 'objective_param',
              name: '目标参数',
              sub_key: 'tree_params',
              sub_name: null,
              type: 'str',
              children: [
                {
                  order: 11,
                  key: 'use_missing',
                  name: '任务类型',
                  sub_name: null,
                  type: 'str',
                  children: []
                },
                {
                  order: 22,
                  key: 'zero_as_missing',
                  name: '任务类型',
                  sub_name: null,
                  type: 'str',
                  children: []
                },
                {
                  order: 33,
                  key: 'objective',
                  name: '任务类型',
                  sub_name: null,
                  type: 'str',
                  children: []
                }
              ]
            },
            {
              order: 77,
              key: 'objective',
              name: '任务类型',
              sub_name: null,
              type: 'str',
              children: []
            }
          ],
          iphone: 100000
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

[9e6ff207040543a6a440512211e8a7ee.png]: https://img-blog.csdnimg.cn/9e6ff207040543a6a440512211e8a7ee.png
[50a2c1d66abf49d68e886daafba9b95e.png]: https://img-blog.csdnimg.cn/50a2c1d66abf49d68e886daafba9b95e.png