compose-input for element-ui

组件属性

    define: DefineItem[];

    dataSource?: {[key: string]: any;}[];

    /**
     * 列宽 el-col 的 span 属性, 如果没有指定将根据 define 的元素个数来计算
     */
    span?: number;

    /**
     * 栅格间距 el-row 的 gutter 属性 默认 16
     */
    gutter?: number;

    /**
     * 是否使用 el-form-item包装动态表单组件 默认为使用
     * 用法：no-form-item
     */
    noFormItem?: boolean;

    /**
     * 通用 el-form-item 属性
     */
    formItemProps?: {
        [key: string]: any;
    };

    /**
     * 通用 el-col 属性
     */
    colProps?: {
        [key: string]: any;
    };

DefineItem 类型

• type
• props
• options
• parentIndex
• optionsKeyName
• lableKeyName
• valueKeyName
• formItemProps
• colProps
• label

example typescript

<template>
  <div>
    <h1>用法</h1>
    <compose-input v-model="oneValue" :define="oneDefine"></compose-input>
    <h1>级联选择</h1>
    <compose-input v-model="threeValue" :define="threeDefine" :data-source="threeDataSource"></compose-input>
    <h1>动态组合</h1>
    <compose-input v-model="twoValue" :define="twoDefine"></compose-input>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Model } from 'vue-property-decorator';
import ComposeInput, { DefineItem, DefineItemFn } from '../';

const mapToOptions = (arr: string[]) => arr.map(it => ({ label: it, value: it }));
@Component({
  components: { ComposeInput },
})
export default class Demo extends Vue {
  // one
  oneValues = [];
  oneDefine: DefineItem[] = [
    { type: 'el-input' },
    { type: 'el-select' },
    { type: 'el-slider' },
    { type: 'el-date-picker' },
    { type: 'el-time-select' },
    { type: 'el-input-number' },
    { type: 'el-radio' },
    { type: 'el-rate' },
    { type: 'el-checkbox' },
    { type: 'el-switch' },
  ];
  // two 显示 label 属性透传
  twoValues = [];
  twoDefine: DefineItem[] = [
    { type: 'el-input', label: '用户名', props: { placeholder: '请输出用户名' } },
    { type: 'el-input', label: '密码', props: { placeholder: '请输入密码' } },
  ];
  // three 级联
  threeValues = [];
  threeDefine: [DefineItem, DefineItem, DefineItem] = [
    { type: 'el-select', lableKeyName: 'strategyName', valueKeyName: 'id' },
    {
      type: 'el-select',
      // 级联配置
      parentIndex: 0,
      optionsKeyName: 'strategyOperation',
      lableKeyName: 'name',
      valueKeyName: 'id',
    },
    {
      type: 'el-select',
      // 级联配置
      parentIndex: 0,
      optionsKeyName: 'strategyValues',
      lableKeyName: 'name',
      valueKeyName: 'id',
    },
  ];
  // 数据从api获取 此处为 mock 数据
  threeDataSource = [
    {
      id: '1',
      strategyName: '网站名称',
      strategyOperation: [{ name: '等于', id: '=' }],
      strategyValues: [{ name: '百度', id: '1' }, { name: '新浪', id: '2' }, { name: '阿里', id: '3' }],
    },
    {
      id: '2',
      strategyName: '访问量',
      strategyOperation: [{ name: '大于', id: '>' }, { name: '等于', id: '=' }, { name: '小于', id: '<' }],
      strategyValues: [{ name: '10', id: '10' }, { name: '100', id: '100' }],
    },
  ];
}
</script>