先來看這個：

Schema: {
  columns: [
    {
      index: 'user-name',
      label: '姓名',
      name: 'name',
    }, {
      index: 'user-sex',
      label: '性別',
      name: 'sex',
      holder: 'switch',
      activeText: '男',
      inactiveText: '女',
    }, {
      index: 'user-depart',
      label: '部門',
      name: 'depart',
      holder: 'select',
      items: [
        {
          value: 1,
          label: '第一中學',
        },
        {
          value: 2,
          label: '第二中學',
        },
        {
          value: 3,
          label: '第三中學',
        },
        {
          value: 4,
          label: '第四中學',

        },
      ],
    }, 
  ],
}

假如有這么個組件唠雕，把這個Schema傳入，就可以渲染出一個form：

表單視圖.PNG

那么西乖，后端只要發(fā)送Schema + data,前端自動渲染視圖侣集，就不需要那么多的視圖頁面了。
這樣王凑，只需要基本的視圖塊來組合就可以了：

• 表單視圖塊
• 表格視圖塊
• 圖表視圖塊
• 樹狀視圖塊
  然后加以組合即可搪柑。
  按照上面的思路，我們設計容器頁和視圖組件頁
• 容器頁可相互嵌套（管理頁面內跳轉）
• 容器頁可跳轉（登錄頁跳轉到管理頁）
• 容器頁可包含視圖組件
• 視圖組件可以組合

這里邊涉及到動態(tài)渲染表單域索烹，通過Rander函數(shù)來處理工碾，新建ElFormField.vue文件來封裝所有的表單域：

import emitter from 'element-ui/src/mixins/emitter';

export default {
  render(createElement) {
    const self = this;
    // props
    const props = this.item || {};
    props.value = this.value;
    props.disabled = this.disabled;
    // children
    let children;
    let holder = this.item.holder || 'input';
    switch (holder) {
      case 'text':
        holder = 'input';
        break;
      case 'textare':
        holder = 'input';
        props.type = 'textarea';
        break;
      case 'password':
        holder = 'input';
        props.type = 'password';
        break;
      case 'time-range':
        holder = 'el-time-picker';
        props.isRange = true;
        break;
      case 'date-range':
      case 'data-time-range':
        holder = 'el-date-picker';
        break;
      case 'radio-group':
        children = [];
        this.item.items.forEach(element => children.push(createElement('el-radio', {
          props: {
            label: element.value,
            disabled: element.disabled,
          },
        }, [element.label])));
        break;
      case 'checkbox-group':
        children = [];
        this.item.items.forEach(element => children.push(createElement('el-checkbox', {
          props: {
            label: element.value,
            disabled: element.disabled,
          },
        }, [element.label])));
        break;
      case 'select':
        children = [];
        this.item.items.forEach(element => children.push(createElement('el-option', {
          props: element,
        })));
        break;
      default:
    }
    return createElement(`el-${holder}`, {
      props,
      on: {
        input: self.input.bind(self),
      },
    }, children);
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    value: {
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    // ElPair,
    // ElAutoput,
    // ElVerify,
  },
  methods: {
    input(value) {
      this.$emit('input', this.item.name, value);
    },
  },
  mixins: [emitter],
};

代碼中item的表單域Schema信息，value是數(shù)據(jù)信息
下面是重點百姓，也是我踩的坑
Element-ui的表單通過廣播處理表單信息渊额，需要引入Element-ui自己定義的emitter。
這就是代碼中為什么有個mixins: [emitter]垒拢。
否則旬迹，表單域的修改動作反饋不給表單，表單的清空動作也會失效求类。