嘟嘟云A sass ui框架

# 说明

  1. type name key 为必填参数 type决定了使用组件类型，name决定了左边显示中文，key决定了v-model绑定的data中发送后台的key

  2. 表单组件将 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker 等结合组成 将会支持大部分组件嵌套, 选项参数也会和子集组件保持统一。

# 布局说明

内容层布局从上到下为【筛选&功能区】、【操作区】、【内容区】； 筛选功能区内放置步骤条、tab等功能组件时，布局在筛选条件之上； 存在筛选条件时查询、重置组合按钮紧跟最后一个筛选条件后面，空间不足则换行距左布局； 所有针对业务的整体操作以按钮形式放置在操作区，padding关系遵循N*8px关系，为24px； 内容区放置相关业务内容，列表、表格、表单等内容；

# 基本用法

  • 1.4.8 版本新增label v-html，可以通过customLabel这个参数来设置当前label是否自定义

  • 重置请调用resetFields方法，会自动重置到最初设置状态。注：异步设置初始值会导致组件读取初始值有误差，遇到这种问题可以使用v-if在请求成功之后显示form来解决问题。也可以自行更改sendData来解决

  • 4.1.9 版本之后新增纯文本展示，type为text。如果当前有list字典的话那么就会使用进行数据转换。 可以通过textLableKey设置显示key默认lable, 可以通过textLableValue设置取值默认value, 可以通过textListKey设置读取字典Key默认list。 通过textOverflow设置是否溢出隐藏

<template>
  <div class="getInsurancePolicy">
    <higher-form :list="formList" v-model="sendData"></higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        },
        {
          type: 'text',
          name: '文本',
          key: 'text',
          textOverflow: true,
          list: [
            {
              label: '这是个很长的文本,这是个很长的文本,这是个很长的文本',
              value: '1'
            }
          ]
        },
        {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'cascader',
          name: 'cascader',
          key: 'cascaderValue',
          list: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        },
        { // input类型
          type: 'input',
          name: 'inputUnit',
          key: 'inputUnit',
          width: '516px',
          unitOptions: {
            "prepend": {
              width: '85px',
              key: 'cunit',
              unit: [
                {
                  label: '时间',
                  value: 's'
                },
                {
                  label: '速度',
                  value: 'n'
                }
              ]
            }
          }
        },
        {
          type: 'datePicker',
          name: 'DateTimePicker',
          keys: ['datePicker1', 'datePicker2'],
          pickerType: 'datetimerange'
        },
        {
          type: 'checkbox',
          name: 'checkbox',
          key: 'checkbox',
          showAll: true,
          list: [
            {
              label: '北京',
              value: 'beijin'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '杭州',
              value: 'hangzhou'
            }
          ]
        },
        {
          type: 'radio',
          name: 'radio',
          key: 'radio',
          list: [
            {
              label: '北京',
              value: 'beijin'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '杭州',
              value: 'hangzhou'
            }
          ]
        },
        {
          type: 'dropdown',
          name: 'dropdown',
          key: 'dropdown',
          list: [
            {
              label: '北京',
              value: 'beijin'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '杭州',
              value: 'hangzhou'
            }
          ]
        }
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null,
        checkbox: ['beijin'],
        radio: null,
        cunit: 's',
        text: '1'
      }
    }
  }
}
</script>
Expand Copy

# 紧凑的表单

  • 通过指定mode值为compact就会进入紧凑模式
<template>
  <div class="getInsurancePolicy" >
    <higher-form :list="formList" v-model="sendData" mode="compact">
    </higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        },
        {
          type: 'radio',
          name: 'radio',
          key: 'radio',
          list: [
            {
              label: '北京',
              value: 'beijin'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '杭州',
              value: 'hangzhou'
            }
          ]
        },
        {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'datePicker',
          name: 'DateTimePicker',
          keys: ['datePicker1', 'datePicker2'],
          pickerType: 'datetimerange'
        },
        {
          type: 'cascader',
          name: 'cascader',
          key: 'cascaderValue',
          list: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null
      }
    }
  }
}
</script>
Expand Copy

# 单向换行

设置type为br那么当前这个选项就是变成br标签

<template>
  <div class="getInsurancePolicy">
    <higher-form :list="formList" v-model="sendData"></higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        },
        {
          type: 'br'
        },{
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        
        {
          type: 'cascader',
          name: 'cascader',
          key: 'cascaderValue',
          list: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        },
        {
          type: 'datePicker',
          name: 'DateTimePicker',
          keys: ['datePicker1', 'datePicker2'],
          pickerType: 'datetimerange'
        },
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null
      }
    }
  }
}
</script>
Expand Copy

# 全部换行

设置align为column 那么就会变成全部换行的竖向结构

<template>
  <div class="getInsurancePolicy">
    <higher-form :list="formList" v-model="sendData" align="column"></higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        }, {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'datePicker',
          name: 'DateTimePicker',
          keys: ['datePicker1', 'datePicker2'],
          pickerType: 'datetimerange'
        },
        {
          type: 'cascader',
          name: 'cascader',
          key: 'cascaderValue',
          list: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null
      }
    }
  }
}
</script>
Expand Copy

# 定制宽度

  • 通过设置width可以单独配置宽度
<template>
  <div class="getInsurancePolicy">
    <higher-form :list="formList" v-model="sendData"></higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          width: '350px',
          key: 'inputValue'
        },
        {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        }
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null,
        checkbox: ['beijin'],
        radio: null
      }
    }
  }
}
</script>
Expand Copy

# 带操作栏

操作栏目前限制放按钮，有其他场景出现时候在考虑其他组件放操作栏的案例

发送后台数据：{ "inputValue": 1111, "selectValue": "1", "datePicker1": "2020-09-26 00:00:00", "datePicker2": "2020-09-27 00:00:00", "cascaderValue": null }
查询 重置 拖动文件 
<template>
  <div class="getInsurancePolicy">
    <div style="margin-bottom:24px;">发送后台数据：{{sendData}}</div>
    <higher-form :list="formList" ref="form" v-model="sendData">
      <db-button icon="DBBASEsearch">
        查询
      </db-button>
      <db-button icon="DBBASEreset" type="low" @click="$refs.form.resetFields()">
        重置
      </db-button>
      <db-button type="dashed">
        拖动文件
      </db-button>
    </higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        },
        {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'datePicker',
          name: 'DateTimePicker',
          keys: ['datePicker1', 'datePicker2'],
          pickerType: 'datetimerange'
        },
        {
          type: 'cascader',
          name: 'cascader',
          key: 'cascaderValue',
          list: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null
      }
    }
  }
}
</script>
Expand Copy

# 带操作栏独占一行

  • 设置is-action-block为true

  • 3.3.7 新增is-alignment可以设置是否与lable对齐

发送后台数据：{ "inputValue": 1111, "selectValue": "1", "datePicker1": "2020-09-26 00:00:00", "datePicker2": "2020-09-27 00:00:00", "cascaderValue": null }
查询 重置 拖动文件 
<template>
  <div class="getInsurancePolicy">
    <div style="margin-bottom:24px;">发送后台数据：{{sendData}}</div>
    <higher-form :list="formList" ref="form" v-model="sendData" is-action-block>
      <db-button icon="DBBASEsearch">
        查询
      </db-button>
      <db-button icon="DBBASEreset" type="low" @click="$refs.form.resetFields()">
        重置
      </db-button>
      <db-button type="dashed">
        拖动文件
      </db-button>
    </higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        },
        {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'datePicker',
          name: 'DateTimePicker',
          keys: ['datePicker1', 'datePicker2'],
          pickerType: 'datetimerange'
        },
        {
          type: 'cascader',
          name: 'cascader',
          key: 'cascaderValue',
          list: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null
      }
    }
  }
}
</script>
Expand Copy

# 设置非必填

设置notRequired参数会进行反向排除非必填项，值为[key1, key2]

提交 
<template>
  <div class="getInsurancePolicy" >
    <higher-form :list="formList" v-model="sendData" :rules="rules" ref="form" :not-required="notRequired">
      <db-button @click="submitForm('ruleForm')">
        提交
      </db-button>
    </higher-form>
  </div>
</template>

<script>
const {
  validate,
  isPhone,
  isIdCard,
  isIntervalDigit,
  isMaxDecimal
} = require('@/utils/validate.js') // 实际应用为 import { } from 'db-tidy-ui/lib/utils/validate.js'
export default {
  data () { // 数据
    return {
      notRequired: [],
      rules: {
        phone: [{ validator: validate('请输入正确的手机号码', isPhone), trigger: 'blur' }],
        idCard: [{ validator: validate('请输入正确的身份证号', isIdCard), trigger: 'blur' }],
        min: [{ required: true, message: '请输入最小数', trigger: 'blur' }],
        max: [{ validator: validate('不能小于最小数', val => val >= this.sendData.min ), trigger: 'blur' }],
        premium: [{ validator: validate('保费最多2位小数', isMaxDecimal, 2), trigger: 'blur' }],
        paymentTerm: [{ validator: validate('缴费期限为2至3位数', isIntervalDigit, 2, 3), trigger: 'blur' }], // 这边解释后面是2, 3是什么，validate默认参数2位多余参数会补到校验函数上。所以实际上是isIntervalDigit(2, 3)
      },
      formList: [
        { // input类型
          type: 'input',
          name: '手机号',
          key: 'phone'
        }, { // input类型
          type: 'input',
          name: '身份证号',
          key: 'idCard'
        }, {
          type: 'input',
          name: '缴费期限',
          key: 'paymentTerm'
        }, {
          type: 'input',
          name: '保费',
          key: 'premium'
        }, {
          type: 'input',
          name: '最小数',
          key: 'min'
        } , {
          type: 'input',
          name: '最大数',
          key: 'max'
        }
      ],
      sendData: {
        phone: null,
        idCard: null,
        min: null,
        max: null,
        paymentTerm: null,
        premium: null
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          return false;
        }
      });
    }
  }
}
</script>
Expand Copy

# 配合校验工具

校验工具是目前封装的一套校验库, 他可以搭配这form实现快速校验

  • 4.5.3 新加入了特殊选项的获取方式，内包含了所有的特殊选项具体使用请查看特殊选项
提交 
<template>
  <div class="getInsurancePolicy" >
    <higher-form :list="formList" v-model="sendData" :rules="rules" ref="form" :not-required="[]">
      <db-button @click="submitForm('ruleForm')">
        提交
      </db-button>
    </higher-form>
  </div>
</template>

<script>
const {
  validate,
  isPhone,
  isIdCard,
  isIntervalDigit,
  isMaxDecimal,
  validateSpecial
} = require('@/utils/validate.js') // 实际应用为 import { } from 'db-tidy-ui/lib/utils/validate.js'
export default {
  data () { // 数据
    return {
      rules: {
        custom: [{ validator: this.custom, trigger: 'blur' }],
        phone: [{ validator: validate('请输入正确的手机号码', isPhone), trigger: 'blur' }],
        idCard: [{ validator: validate('请输入正确的身份证号', isIdCard), trigger: 'blur' }],
        min: [{ required: true, message: '请输入最小数', trigger: 'blur' }],
        max: [{ validator: validate('不能小于最小数', val => val >= this.sendData.min ), trigger: 'blur' }],
        premium: [{ validator: validate('保费最多2位小数', isMaxDecimal, 2), trigger: 'blur' }],
        paymentTerm: [{ validator: validate('缴费期限为2至3位数', isIntervalDigit, 2, 3), trigger: 'blur' }], // 这边解释后面是2, 3是什么，validate默认参数2位多余参数会补到校验函数上。所以实际上是isIntervalDigit(2, 3)
        h: [{ validator: validateSpecial('请输入当前表单的大小', this.special), trigger: 'blur' }]
      },
      formList: [
        {
          type: 'input',
          name: '自定义编写',
          key: 'custom'
        },
        { // input类型
          type: 'input',
          name: '手机号',
          key: 'phone'
        }, { // input类型
          type: 'input',
          name: '身份证号',
          key: 'idCard'
        }, {
          type: 'input',
          name: '缴费期限',
          key: 'paymentTerm'
        }, {
          type: 'input',
          name: '保费',
          key: 'premium'
        }, {
          type: 'input',
          name: '最小数',
          key: 'min'
        } , {
          type: 'input',
          name: '最大数',
          key: 'max'
        }, {
          type: 'input',
          name: '特殊选项',
          key: 'h'
        }
      ],
      sendData: {
        phone: null,
        idCard: null,
        min: null,
        max: null,
        paymentTerm: null,
        premium: null,
        h: null
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          return false;
        }
      });
    },
    special(v, options) { // 特殊模式可以通过第二个参数来获取特殊参数
      const instance = options.source.instance
      // 在复杂的表单校验中往往需要通过实例来进行数据对比
      return v === instance.size
    },
    custom(rule, value, callback, source, options) {
      console.log(rule, value, callback, source, options)
      return true
    }
  }
}
</script>
Expand Copy

# 自定义插槽

<template>
  <div class="getInsurancePolicy">
    <higher-form :list="formList" v-model="sendData">
      <template v-slot:slotNameA="{ options }">
        <li>设置了isPure为true就不会进行边距计算，那么就是贴边的</li>
        <li>这个是插槽</li>
        <li>这个是插槽上下文数据{{options}}</li>
      </template>
    </higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      formList: [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        },
        {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'datePicker',
          name: 'DateTimePicker',
          keys: ['datePicker1', 'datePicker2'],
          pickerType: 'datetimerange'
        },
        {
          type: 'cascader',
          name: 'cascader',
          key: 'cascaderValue',
          list: [{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        },
        {
          type: 'checkbox',
          name: 'checkbox',
          key: 'checkbox',
          showAll: true,
          list: [
            {
              label: '北京',
              value: 'beijin'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '杭州',
              value: 'hangzhou'
            }
          ]
        },
        {
          type: 'radio',
          name: 'radio',
          key: 'radio',
          list: [
            {
              label: '北京',
              value: 'beijin'
            },
            {
              label: '上海',
              value: 'shanghai'
            },
            {
              label: '杭州',
              value: 'hangzhou'
            }
          ]
        },
        {
          type: 'slot',
          isPure: true,
          key: 'slotNameA'
        },
      ],
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null,
        checkbox: ['beijin'],
        radio: null
      }
    }
  }
}
</script>
Expand Copy

# 设置隐藏选项

  • 通过hiddenOptions选项标记隐藏项，在通过unfold来决定是否显示隐藏项
查询 重置 展开 
<template>
  <div class="getInsurancePolicy">
    <higher-form :list="formList"
    v-model="sendData" :hidden-options="hiddenOptions" ref="form" :unfold="unfold">
      <db-button >
        查询
      </db-button>
      <db-button type="low" @click="$refs.form.resetFields()">
        重置
      </db-button>
      <db-button type="text" @click="open">
        {{unfold ? '收起' : '展开'}}
      </db-button>
    </higher-form>
  </div>
</template>

<script>
export default {
  data () { // 数据
    return {
      unfold: false,
      sendData: {
        inputValue: 1111,
        selectValue: '1',
        datePicker1: "2020-09-26 00:00:00",
        datePicker2: "2020-09-27 00:00:00",
        cascaderValue: null,
        checkbox: ['beijin'],
        radio: null,
        cunit: 's'
      },
      hiddenOptions: [
        'inputValue2'
      ]
    }
  },
  computed: {
    formList() {
      return [
        { // input类型
          type: 'input',
          name: 'input',
          key: 'inputValue'
        },
        {
          type: 'select',
          name: 'select',
          key: 'selectValue',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'select',
          name: 'select2',
          key: 'selectValue2',
          list: [
            {
              'label': '邮件解析异常',
              'value': '1'
            },
            {
              'label': '保单数据异常',
              'value': '2'
            }
          ]
        },
        {
          type: 'input',
          name: 'input2',
          key: 'inputValue2'
        }
      ]
    } 
  },
  methods: {
    open() {
      this.unfold = !this.unfold
    }
  }
}
</script>
Expand Copy

# 动态增删

  • 通过设置slot为del来设置删除按钮的插槽
  • 也可以通过del-${key}来单独设置删除插槽, 单独设置的插槽会覆盖默认插槽
新增域名 
<template>
  <div class="form__block">
    <div class="getInsurancePolicy">
      <higher-form
      align="column"
      :list="formList" 
      v-model="sendData"
      ref="form" 
      is-alignment
      is-action-block
      :unfold="unfold">
        <db-button type="dashed" style="width:100%;" @click="add">
          新增域名
        </db-button>
        <template v-slot:del="{ item, index }" >
          <db-button
            v-if="domainList.length > 1 && item.showDel"
            class="db-form-del"
            type="text"
            @click="del(item)"
            color="danger"
          >删除</db-button>
        </template>
        <template v-slot:del-inputValue2="{ item, index }">
          <db-button
            v-if="domainList.length > 1 && item.showDel"
            class="db-form-del"
            type="text"
            @click="del(item)"
            color="danger"
          >删除2</db-button>
        </template>
      </higher-form>
    </div>
  </div>
</template>

<script>
const domainOptions = {
  type: 'input',
  name: '域名',
  key: 'inputValue',
  showDel: true
}
export default {
  data () { // 数据
    return {
      unfold: false,
      sendData: {
        inputValue: 1111
      },
      domainList: [
        domainOptions
      ],
      i: 0
    }
  },
  computed: {
    formList() {
      return [
        {
          type: 'select',
          name: '服务器',
          key: 'server',
          list: [
            {
              'label': '服务器1',
              'value': 'server1'
            },
            {
              'label': '服务器2',
              'value': 'server2'
            }
          ]
        },
        ...this.domainList
      ]
    } 
  },
  methods: {
    del(item) {
      this.domainList.splice(this.domainList.findIndex(options => {
        return options.key === item.key
      }), 1)
    },
    add() {
      this.i ++
      this.domainList.push({
        ...domainOptions,
        name: `${domainOptions.name}${this.i}`,
        key: `${domainOptions.key}${this.i}`
      })
    }
  }
}
</script>
Expand Copy

# 配合字典快速生成

可以参考字典的用例

# 属性

属性说明如下：

属性 说明 类型 默认值 版本
value 发送值 Object {} 1.0.0
size 大小 String "normal" 1.0.0
list 列表 Array [] 1.0.0
roles 权限 Object [] 1.0.0
notRequired 非必填 Object null 1.0.0
noKeepMargin 去除下边距 Boolean true 1.5.7
hiddenOptions 标记隐藏项 Array null 3.3.0
unfold 显示隐藏项目 Boolean false 3.3.0

# Slots

name 说明
del 删除插槽
del-${item.key} 单个删除插槽
label-${item.key} 单个label插槽
${item.key} 单个选项插槽type值必须是slot

# Autocomplete Methods

方法名 说明 参数
getFormItem 获取当前某个form-item实例 field

← 表格 →