基于elment使用Vue封装动态表单组件

最新推荐文章于 2024-06-28 00:48:41 发布

噜啦噜黑

最新推荐文章于 2024-06-28 00:48:41 发布

阅读量406

点赞数 6

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/NQS__/article/details/136250543

版权

该篇文章介绍了如何使用Vue.js构建一个动态表单，支持Xray配置的添加和删除，用户可以灵活管理主机IP、Port等信息。展示了在表格中使用el-form、el-input和自定义方法进行数据操作的实践。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-form :model="Mdata">
        <div v-for="xray,index in Mdata.xray_list">
            <el-form-item :label="'Xray'+index+'所在主机IP:'">
                <el-input v-model="xray[0]" placeholder="ip地址"/>
            </el-form-item>
            <el-form-item :label="'Xray'+index+'所在主机Port:'">
                <el-input v-model="xray[1]" placeholder="ip端口，默认22"/>
            </el-form-item>
            <el-form-item label="">
                <el-button type="danger" @click="rm_item2('xray',index)">删除2</el-button>
                <el-button type="danger" @click="rm_item(Mdata.xray_list,index)">删除</el-button>
            </el-form-item>
        </div>
        <el-divider>灵活的动态表单</el-divider></el-divider>
        <div v-for="bbj,index in Mdata.bbj_list">
            <el-form-item :label='"其他配置"+index'>
                <el-input v-model="bbj[0]" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="danger" @click="rm_item(Mdata.bbj_list,index)">删除</el-button>
            </el-form-item>
        </div>
        <el-form-item label="">
            <!-- 有坑，这个并没有操作this.Mdata.xray_list -->
            <!-- <el-button type="" @click="add_item(Mdata.xray_list,xray_new)">添加xray配置</el-button> -->
            <el-button type="" @click="add_item2('xray',xray_new)">添加xray配置2</el-button>
            <el-button type="" @click="add_item(Mdata.xray_list,xray_new)">添加xray配置</el-button>
            <el-button type="" @click="add_item(Mdata.bbj_list,['',''])">添加bbj配置</el-button>
            <el-button type="" @click="submit()">提交</el-button>
        </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
    data(){
        // const xray_new = ['','','','','']
        return {
            Mdata:{
                xray_list:[
                    ['','','','','']
                ],
                bbj_list:[
                    ['','']
                ]
            },
            xray_new: ['','','','','']
        }
    },
    methods:{
        add_item2(item_type, item){
            var item_list = []
            var new_item = Array.from(item)
            switch(item_type){
                case 'xray':
                    console.info('xray-----',new_item,item,this.Mdata.xray_list)
                    item_list = this.Mdata.xray_list
                    break
                default:
                    alert(item_type+'瞎搞什么,gun!')
            }
            item_list.push(new_item)
        },
        rm_item2(item_type, index){
            // var index = item_list.indexOf(item)
            var item_list = []
            switch(item_type){
                case 'xray':
                    item_list = this.Mdata.xray_list
                    console.info('xray-del-----',index,this.Mdata.xray_list)
                    break
            }
            if (index != -1){
                item_list.splice(index,1)
            }
        },
        add_item(item_list, item){
            var new_item = Array.from(item)
            item_list.push(new_item)
        },
        rm_item(item_list, index){
            // var index = item_list.indexOf(item) 有bug
            if (item_list.length==1){
                alert('至少保留一个')
                return
            }
            if (index != -1){
                item_list.splice(index,1)
            }
        },
        submit(){
            console.info(this.Mdata)
        }
    }
}
</script>

<style>

</style>

不墨迹，直接上源码。

效果如下图：