vue+element创建动态的form表单.以及动态生成表格的行和列
程序员文章站
2022-12-27 08:26:28
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 动态生成表格的行和列,主要是要 ......
动态创建form表单,网上有插件 (form-create
) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.
最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type
用v-if
来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用
1 <el-form size="mini" class="lj-form lj-form-s1"> 2 <div v-for="(item,i) in table.customerlist" :key="i"> 3 <!-- 0单行文本 --> 4 <el-form-item 5 :label="item.field_title + ': '" 6 v-if="item.field_type == '0' && item.is_show == '1'" 7 > 8 <el-input v-model="item.value" :placeholder="item.placeholder"></el-input> 9 </el-form-item> 10 <!-- 3下拉菜单 --> 11 <el-form-item 12 :label="item.field_title + ': '" 13 v-if="item.field_type == '3' && item.is_show == '1'" 14 > 15 <el-select v-model="item.value" :placeholder="item.placeholder"> 16 <span v-for="(item1,i) in item.field_value" :key="i"> 17 <el-option :label="item1" :value="item1"></el-option> 18 </span> 19 </el-select> 20 </el-form-item> 21 </div> 22 </el-form>
动态生成表格的行和列,主要是要求后端返回的数据格式,根据数据来动态渲染
注意点:这里两个数组 : 表格字段数据: titledata: [], 表格详细数据: tables: [], 数据通过字段来查找/渲染成表格的
1 <template> 2 <div class="boxshadow"> 3 <div style="margin-top: 20px"> 4 5 <el-table 6 :data="tables" 7 ref="multipletable" 8 tooltip-effect="dark" 9 style="width: 100%" 10 @selection-change='selectarinfo'> 11 <el-table-column type="selection" width="45px"></el-table-column> 12 <el-table-column label="序号" width="62px" type="index"> 13 </el-table-column> 14 <template v-for='(col) in titledata'> 15 <el-table-column 16 sortable 17 :show-overflow-tooltip="true" 18 :prop="col.dataitem" 19 :label="col.dataname" 20 :key="col.dataitem" 21 width="124px"> 22 </el-table-column> 23 </template> 24 <el-table-column label="操作" width="80" align="center"> 25 <template slot-scope="scope"> 26 <el-button size="mini" class="del-com" @click="deltabcolone()" ><i class="iconfont icon-shanchu"></i></el-button> 27 </template> 28 </el-table-column> 29 </el-table> 30 31 32 </div> 33 </div> 34 35 </template>
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 }
下一篇: 探讨php中header的用法详解