two.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <div id="two">
  3. <el-row>
  4. <el-col :span="24" class="main">
  5. <el-form :model="form" :rules="rules" ref="form" label-width="80px">
  6. <template v-for="(i, index) in question">
  7. <el-col :span="8" :key="`two${index}`">
  8. <el-form-item v-if="i.type === 'select'" :prop="`${index}`" :key="`two${index}`" :label="`${i.label}`">
  9. <el-select v-model="form[i.model]">
  10. <el-option v-for="(item, index) in getList(i.list)" :key="index" :value="item" :label="item"></el-option>
  11. </el-select>
  12. </el-form-item>
  13. </el-col>
  14. </template>
  15. </el-form>
  16. </el-col>
  17. </el-row>
  18. </div>
  19. </template>
  20. <script>
  21. import { two } from '../fields.js';
  22. import * as select from '../select.js';
  23. import { mapState, createNamespacedHelpers } from 'vuex';
  24. export default {
  25. name: 'two',
  26. props: {
  27. form: { type: Object },
  28. rules: { type: Object },
  29. },
  30. model: {
  31. prop: 'form',
  32. event: 'change',
  33. },
  34. components: {},
  35. data: function() {
  36. return {
  37. question: two,
  38. };
  39. },
  40. created() {},
  41. methods: {
  42. // 获取列表
  43. getList(type) {
  44. return select[type];
  45. },
  46. },
  47. computed: {
  48. ...mapState(['user']),
  49. },
  50. metaInfo() {
  51. return { title: this.$route.meta.title };
  52. },
  53. watch: {
  54. test: {
  55. deep: true,
  56. immediate: true,
  57. handler(val) {},
  58. },
  59. },
  60. };
  61. </script>
  62. <style lang="less" scoped></style>