two.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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. disabled: false,
  38. question: two,
  39. };
  40. },
  41. created() {},
  42. methods: {
  43. // 获取列表
  44. getList(type) {
  45. return select[type];
  46. },
  47. },
  48. computed: {
  49. ...mapState(['user']),
  50. },
  51. metaInfo() {
  52. return { title: this.$route.meta.title };
  53. },
  54. watch: {
  55. test: {
  56. deep: true,
  57. immediate: true,
  58. handler(val) {},
  59. },
  60. },
  61. };
  62. </script>
  63. <style lang="less" scoped></style>