Skip to content
On this page

CommonComplexForm 复杂表单

基础用法

<template>
  <!--<div class="demo">
    <common-card-group
      :card-numbers="cardNumbers"
      :card-infos="cardInfos"
      :span="6"
      :btns="btns"
      :cards="cards"
      @handel-click-create-card="handelClickCreateCard"
    ></common-card-group>
  </div>-->

  <el-button @click.stop="showDialogFn">打开弹窗</el-button>

  <common-dialog
    v-if="showDialog"
    :title="'创建复杂表格'"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <common-complex-form :complex-forms="complexForms"></common-complex-form>
  </common-dialog>
</template>

<script setup lang="ts">
// import { ElMessage } from 'element-plus';
import { ref } from 'vue';

function edit() {
  // ElMessage('编辑');
}
function start() {}


const showDialog = ref<any>(false);
// 添加新卡片
function handelClickCreateCard() {
  showDialog.value = true;
}

// 复杂表单
const complexForms = ref<any>([
  {
    label: '名称',
    name: 'name',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入名称'
    }
  },
  {
    label: '标识符',
    name: 'log',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入标识符'
    }
  },
  {
    label: '数据类型',
    name: 'dataType',
    type: 'select',
    value: '',
    attrs: {
      placeholder: '请选择数据类型',
      clearable: true,
      options: [
        { label: '文本', value: 'text' },
        { label: '数字', value: 'number' },
        { label: '日期', value: 'date' },
        { label: '枚举', value: 'enum' }
      ]
    },
    childForms: {
      text: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }],
      number: [
        { label: '精度', name: 'jingdu', type: 'input', value: '' },
        { label: '单位', name: 'unit', type: 'select', value: '' },
        { label: '读写类型', name: 'type', type: 'radio', value: '' }
      ],
      date: [
        { label: '时间格式', name: 'dateformate', type: 'input', value: '' },
        { label: '读写类型', name: 'type', type: 'radio', value: '' }
      ],
      enum: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }]
    }
  },
  {
    label: '数据长度',
    name: 'data',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入数据长度'
    }
  }
]);

function showDialogFn() {
  showDialog.value = true
}

// 关闭弹窗
function closeDialog() {
  showDialog.value = false;
}

// 确认创建
function confirmDialog() {
  closeDialog();
}
</script>


<template>
  <!--<div class="demo">
    <common-card-group
      :card-numbers="cardNumbers"
      :card-infos="cardInfos"
      :span="6"
      :btns="btns"
      :cards="cards"
      @handel-click-create-card="handelClickCreateCard"
    ></common-card-group>
  </div>-->

  <el-button @click.stop="showDialogFn">打开弹窗</el-button>

  <common-dialog
    v-if="showDialog"
    :title="'创建复杂表格'"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <common-complex-form :complex-forms="complexForms"></common-complex-form>
  </common-dialog>
</template>

<script setup lang="ts">
// import { ElMessage } from 'element-plus';
import { ref } from 'vue';

function edit() {
  // ElMessage('编辑');
}
function start() {}


const showDialog = ref<any>(false);
// 添加新卡片
function handelClickCreateCard() {
  showDialog.value = true;
}

// 复杂表单
const complexForms = ref<any>([
  {
    label: '名称',
    name: 'name',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入名称'
    }
  },
  {
    label: '标识符',
    name: 'log',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入标识符'
    }
  },
  {
    label: '数据类型',
    name: 'dataType',
    type: 'select',
    value: '',
    attrs: {
      placeholder: '请选择数据类型',
      clearable: true,
      options: [
        { label: '文本', value: 'text' },
        { label: '数字', value: 'number' },
        { label: '日期', value: 'date' },
        { label: '枚举', value: 'enum' }
      ]
    },
    childForms: {
      text: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }],
      number: [
        { label: '精度', name: 'jingdu', type: 'input', value: '' },
        { label: '单位', name: 'unit', type: 'select', value: '' },
        { label: '读写类型', name: 'type', type: 'radio', value: '' }
      ],
      date: [
        { label: '时间格式', name: 'dateformate', type: 'input', value: '' },
        { label: '读写类型', name: 'type', type: 'radio', value: '' }
      ],
      enum: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }]
    }
  },
  {
    label: '数据长度',
    name: 'data',
    type: 'input',
    value: '',
    attrs: {
      placeholder: '请输入数据长度'
    }
  }
]);

function showDialogFn() {
  showDialog.value = true
}

// 关闭弹窗
function closeDialog() {
  showDialog.value = false;
}

// 确认创建
function confirmDialog() {
  closeDialog();
}
</script>


配置参数

参数说明类型是否必须
complexForms复杂表单表单元素列表Array[Object],其中卡片内部字段true
---- label表单元素中文显示Stringtrue
---- value表单元素v-model绑定值String Array, Booleantrue
---- type目前暂时支持的表单元素类型有: input/textarea/select/input-num/radio/cascader/switch/checkbox/check-group/date-pickerStringtrue
---- attrs表单元素v-bind属性,支持原本element-plus中表单元素属性,另外对部分表单元素进行封装,支持自定义属性传递。下面有单独对自定义封装表单元素进行讲解Obkectfalse
childForms联动表单元素对象Objectfalse

事件

事件名称说明回调
handelClickCreateCard点击新增时,触发回调函数--