ivew+vue实现表单设计器--实现表格拖拽添加(五)

表单设计经常会碰到比较复杂的大表格,如果一行一行拖拽效率太低了,所以需要写个表格拖拽组件。最终效果大概就是
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第1张图片
根据输入的行和列生成后:
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第2张图片
核心功能有:
1、双击进入编辑,输入文字,离开焦点完成输入,变成label
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第3张图片
2、设置字体、设置居左、居右、居中、改变背景色、改变字体颜色、加粗等
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第4张图片
3、通过拖拽调整表格和宽度和高度

在这里插入图片描述
4、选中多列、多行进行合并、拆分操作
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第5张图片
5、可以插入行、插入列
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第6张图片
6、设置边框显示、以及边框粗细以及边框颜色等。
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第7张图片
7、每个单元格都可以拖拽其他组件进入生成
ivew+vue实现表单设计器--实现表格拖拽添加(五)_第8张图片

你可能感兴趣的:(表单设计,ivew,vue,javascript,vue.js)