antd vue和ElementUI 关于封装form组件以及配置table栏位的config.js文件的关注点

1. 组件的封装记得考虑栏位的长度，响应式布局的灵活性、disabled等考虑好，比较简单。难点在于封装组件的按钮。

// common组件的按钮
<el-row>
  <el-col>
    <el-form-item>
      <el-button v-for="btn in formHandler: {
        type: Array,
        default: () => {}
      }" :key="btn.key" :type="btn.type" @click="btn.handlee('form')">{{btn.label}}</el-button>
    </el-form-item>
  </el-col>
</el-row>


props: {
  searchForm: {
    type: Array,
    default: () => []
  },
  formHandler: {
    type: Array,
    default: () => []
  }
}

watch: {
  searchForm: {
    handler(newValue) {
      this.initFormData()
    },
    immediate: true
  }
}
methods: {
  initFormData() {
    let formData = {}
    this.searchForm.forEach(item => {
      formData[item.name] = item.value
    })
    // this.form为el-form双向绑定v-model的form对象
    this.form = formData
  }
}

// 父组件
<common-form :searchForm="searchForm" :formHandler="formHandler"></common-form>

data() {
  return {
    formHandler: [
      {label: '查询', key: 'search', type:'primary', handler: ()=> this.search}//this.search为查询函数
    ]
  }
}

2.为了节省html代码，要用js配置好相关参数给table栏位、form栏位。antd vue的config配置如下

tableCulom: [
  {tittle: '名称', dataIndex: 'name', width: 100, customRender: (val) => { return formatAmt(val) }},
  {tittle: '类型', dataIndex: 'type', width: 200, 
    customRender: (val) => {
      const option = [{
        key: '1',
        text: '撒旦发射点1'
      }，{
        key: '1',
        text: '撒旦发射点2'
      }]
      return option.find(item => item.key === val) ? option.find(item => item.key === val).text : val
    }
  }
],
formConfig: