vue 根据选项生成表格_vue+element创建动态的form表单.以及动态生成表格的行和列...

动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.

最后我使用了笨方法,针对各个表单写好通用的组件，然后根据type用v-if来渲染对应的表单,数据，事件什么的都可以动态的传进去,比较好用

1

2

3

4

5 :label="item.field_title + ': '"

6 v-if="item.field_type == '0' && item.is_show == '1'"

7 >

8

9

10

11

12 :label="item.field_title + ': '"

13 v-if="item.field_type == '3' && item.is_show == '1'"

14 >

15

16

17

18

19

20

21

22

动态生成表格的行和列,主要是要求后端返回的数据格式,根据数据来动态渲染

注意点:这里两个数组 :    表格字段数据: titleData: [],   表格详细数据: tables: [], 数据通过字段来查找/渲染成表格的

1

2

3

4

5

6 :data="tables"

7 ref="multipleTable"

8 tooltip-effect="dark"

9 style="width: 100%"

10 @selection-change='selectArInfo'>

11

12

13

14

15

16 sortable

17 :show-overflow-tooltip="true"

18 :prop="col.dataItem"

19 :label="col.dataName"

20 :key="col.dataItem"

21 width="124px">

22

23

24

25

26

27

28

29

30

31

32

33

34

35

1 data () {

2 return{

3 tables: [{

4 xiaoxue: '福兰',

5 chuzhong: '加芳',

6 gaozhong: '蒲庙',

7 daxue: '西安',

8 yanjiusheng: '西安',

9 shangban: '北京'

10 }, {

11 xiaoxue: '南坊',

12 chuzhong: '礼泉',

13 gaozhong: '礼泉',

14 daxue: '西安',

15 yanjiusheng: '西安',

16 shangban: '南坊'

17 }, ],

18 titleData: [{

19 dataItem: 'xiaoxue',

20 dataName: '小学'

21 }, {

22 dataItem: 'chuzhong',

23 dataName: '初中'

24 }, {

25 dataItem: 'gaozhong',

26 dataName: '高中'

27 }, {

28 dataItem: 'daxue',

29 dataName: '大学'

30 }, {

31 dataItem: 'yanjiusheng',

32 dataName: '研究生'

33 }, {

34 dataItem: 'shangban',

35 dataName: '上班'

36 }]

37 }