`
arpenker
  • 浏览: 357458 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

vue界面自动化生成

    博客分类：
  • vue
vue 
阅读更多
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 搜索页面</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 
 
    <title>vue操作</title>
    <style type="text/css">
        [v-cloak] {
            display: none
        }
        table {
            border: 1px solid #ccc;
            padding: 0;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 10px;
            width: 100%;
        }
        table td,
        table th {
            height: 30px;
            border: 1px solid #ccc;
            background: #fff;
            font-size: 15px;
            padding: 3px 3px 3px 8px;
        }
        table th:first-child {
            width: 30px;
        }
        .container,
        .st {
            width: 1000px;
            margin: 10px auto 0;
            font-size: 13px;
            font-family: 'Microsoft YaHei'
        }
        .container .search {
            font-size: 15px;
            padding: 4px;
        }
        .container .add {
            padding: 5px 15px;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
            background: rgba(0, 0, 0, 0.7);
        }
        .overlay td:first-child {
            width: 66px;
        }
        .overlay .con {
            position: absolute;
            width: 420px;
            min-height: 300px;
            background: #fff;
            left: 50%;
            top: 50%;
            -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
            /*margin-top: -150px;*/
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="st">
        <h1>vue数据</h1>
        <p>返回文章： <a href="http://www.xiabingbao.com/vue/2017/07/10/vue-curd.html">vue</a></p>
    </div>
    <div class="container" id="app">
        <div>
            <input type="text" placeholder="search" @input="search" list="cars" class="search">
            <datalist id="cars">
                <option v-for="item in searchlist" :value="item"></option>
            </datalist>
            <input type="button" class="add" @click="add" value="新增">
        </div>
        <div>
            <table>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>省份</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
                <tr v-cloak v-for="(item, index) of slist">
                    <td>{{index+1}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.province}}</td>
                    <td>{{item.hobby.join(' | ')}}</td>
                    <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
                </tr>
            </table>
        </div>
        <model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
    </div>
</body>
<script src="Scripts/vue3.js"></script>
<script type="text/javascript">
    Vue.component('model', {
        props: ['list', 'isactive'],
        template: `<div class="overlay" v-show="isactive">
                        <div class="con">
                        <h2 class="title">新增 | 修改</h2>
                        <div class="content">
                        <table>
                        <tr>
                        <td>用户名</td>
                        <td><input type="text" v-model="modifylist.username"></td>
                        </tr>
                        <tr>
                        <td>邮箱</td>
                        <td><input type="text" v-model="modifylist.email"></td>
                        </tr>
                        <tr>
                        <td>性别</td>
                        <td>
                        <label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
                        <label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
                        <label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
                        </td>
                        </tr>
                        <tr>
                        <td>省份</td>
                        <td>
                        <select name="" id="" v-model="modifylist.province">
                        <option value="北京市">北京市</option>
                        <option value="河北省">河北省</option>
                        <option value="河南省">河南省</option>
                        <option value="重庆市">重庆市</option>
                        <option value="广东省">广东省</option>
                        <option value="辽宁省">辽宁省</option>
                        </select>
                        </td>
                        </tr>
                        <tr>
                        <td>爱好</td>
                        <td>
                        <label><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
                        <label><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
                        <label><input type="checkbox" v-model="modifylist.hobby" value="插画">插画</label>
                        <label><input type="checkbox" v-model="modifylist.hobby" value="编程">编程</label>
                        <label><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
                        </td>
                        </tr>
                        </table>
                        <p>
                        <input type="button" @click="changeActive" value="取消">
                        <input type="button" @click="modify" value="保存">
                        </p>
                        </div>
                        </div>
                    </div>`,
        computed: {
            modifylist() {
                return this.list;
            }
        },
        methods: {
            changeActive() {
                this.$emit('change');
            },
            modify() {
                this.$emit('modify', this.modifylist);
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            isActive: false,
            selected: -1,
            selectedlist: {},
            slist: [],
            searchlist: [],
            list: [
                {
                    username: 'aaaaa',
                    email: '123@qq.com',
                    sex: '男',
                    province: '北京市',
                    hobby: ['篮球', '读书', '编程']
                },
                {
                    username: 'bbbbb',
                    email: 'bbbbbbb@163.com',
                    sex: '女',
                    province: '河北省',
                    hobby: ['弹琴', '读书', '插画']
                },
                {
                    username: 'aaabb',
                    email: 'abababab@qq.com',
                    sex: '女',
                    province: '重庆市',
                    hobby: ['篮球']
                },
                {
                    username: 'cccccc',
                    email: '123@qq.com',
                    sex: '男',
                    province: '北京市',
                    hobby: ['篮球', '读书', '编程']
                },
                {
                    username: 'dddddd',
                    email: 'bbbbbbb@163.com',
                    sex: '女',
                    province: '河北省',
                    hobby: ['弹琴', '读书', '插画']
                },
                {
                    username: 'eeeee',
                    email: 'abababab@qq.com',
                    sex: '女',
                    province: '重庆市',
                    hobby: ['篮球']
                }
            ]
        },
        created() {
            this.setSlist(this.list);
          
        },
        methods: {
            // 修改数据
            showOverlay(index) {
                this.selected = index;
                this.selectedlist = this.list[index];
                this.changeOverlay();
            },
            // 点击保存按钮
            modify(arr) {
                if (this.selected > -1) {
                    Vue.set(this.list, this.selected, arr);
                    this.selected = -1;
                } else {
                    this.list.push(arr);
                }
                this.setSlist(this.list);
                this.changeOverlay();
            },
            add: function () {
                this.selectedlist = {
                    username: '',
                    email: '',
                    sex: '男',
                    province: '北京市',
                    hobby: []
                };
                this.isActive = true;
            },
            // delete list in index location
            del(index) {
                this.list.splice(index, 1);
                this.setSlist(this.list);
            },
            changeOverlay() {
                this.selected = -1;
                this.isActive = !this.isActive;
            },
            // 获取需要渲染到页面中的数据
            setSlist(arr) {
                this.slist = JSON.parse(JSON.stringify(arr));
            },
            // 搜索
            search(e) {
                var v = e.target.value,
                
                    self = this;
              
                self.searchlist = [];
                if (v) {
                    var ss = [];
                    // 过滤需要的数据
                    this.list.forEach(function (item) {
                        if (item.username.indexOf(v) > -1) {
                            if (self.searchlist.indexOf(item.username) == -1) {
                                self.searchlist.push(item.username);
                            }
                            ss.push(item);
                        } else if (item.email.indexOf(v) > -1) {
                            if (self.searchlist.indexOf(item.email) == -1) {
                                self.searchlist.push(item.email);
                            }
                            ss.push(item);
                        }
                    });
                    this.setSlist(ss); // 将过滤后的数据给了slist

                 
                } else {
                    // 没有搜索内容，则展示全部数据
                    this.setSlist(this.list);
                }
            }
        },
        watch: {
        }
    })
</script>
</html>
分享到：
| 实时界面生成
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于vue可视化拖拽编辑，页面生成工具

    同时，由于JSON数据的通用性，生成的界面代码易于版本控制和团队协作，也便于自动化测试和后期维护。 总的来说，基于Vue的可视化拖拽编辑页面生成工具是现代前端开发的重要辅助工具，它结合了Vue的组件化思想和直观...

    基于Vue的JSON可视化编辑器通过定义JSONSchema直接生成UI界面

    总结，基于Vue的JSON可视化编辑器是前端开发的一个创新实践，它结合了Vue.js的组件化特性与JSON Schema的强大描述能力，使得UI生成更加自动化和高效。通过理解和掌握这一技术，开发者能够更便捷地创建交互丰富的前端...

    PcVue系统自动化解决方案手册_3.0.9.zip

    作为一款强大的人机界面（HMI）和SCADA（Supervisory Control and Data Acquisition）软件，PcVue在全球范围内被广泛用于工业自动化、楼宇自动化、能源管理等多个领域。 PcVue系统的核心特点包括其灵活性、可扩展性...

    基于python3+django+Vue自动化测试平台开发

    同时，考虑使用持续集成工具如Jenkins或GitHub Actions，实现测试的自动化执行和报告生成。 7. 数据库管理：Django自带ORM（对象关系映射），可以方便地操作数据库。根据需求，可以选择SQLite（轻量级，适合开发...

    vuegg一个通过可视化拖拽组件的方式来生成VUEGUI原型界面

    当拖放组件到画布上时，VueGG会自动生成对应的Vue组件代码。这不仅方便开发者理解生成的代码，也为后期的代码维护和扩展提供了便利。同时，VueGG可能还包含了状态管理工具，如Vuex，帮助组织和管理组件间的通信，...

    generatorvueplugin生成vue插件的Yeoman生成器

    Yeoman则是一个用于自动化脚手架生成的工具，它可以帮助开发者快速搭建项目结构，减少重复工作。"generator-vue-plugin"是针对Vue.js生态的Yeoman生成器，专门用来创建Vue插件。下面我们将深入探讨这个生成器及其...

    VUE动态生成word的实现

    通过使用Vue.js框架，开发者可以利用其响应式和组件化的特点，轻松构建出动态的用户界面。结合其他库和API，如axios进行HTTP请求、dayjs进行日期处理等，可以进一步丰富应用的功能。 首先，我们来详细分析一下Vue...

    PcVue系统自动化解决方案手册_3.0.3.rar

    PcVue，全称为PC-based Vue Interface，是一款由法国Arc Informatique公司开发的工业人机界面（HMI）和SCADA（Supervisory Control and Data Acquisition）系统，广泛应用于各种工业自动化环境。本手册主要涵盖了...

    前端开发-基于ts+vue的随机头像生成器前端实现.zip

    Vue实例化过程中，开发者会定义数据属性（如`avatarOptions`，包含颜色、形状等头像配置）以及方法（如`generateAvatar`，用于生成新的随机头像）。 接下来，TypeScript在项目中的应用增强了代码的可读性和可靠性。...

    一款高效的Vue低代码表单，可视化设计，一键生成源码

    这样的工具大大简化了Web应用开发过程，使得开发者无需从零开始编写大量表单代码，而是通过图形化界面设计表单布局，然后自动生成对应的Vue组件代码。 在描述中，“Vue低代码表单、工作流表单”进一步说明了这个...

    vue插件——使用canvas生成图形验证码

    在IT行业中，图形验证码是一种广泛应用于网站以防止恶意自动化脚本（如机器人）进行操作的安全机制。Vue.js作为一款流行的前端框架，它允许开发者构建高效、可复用的组件。而将canvas技术与Vue.js结合，可以创建动态...

    Vue+Element实现动态生成新表单并添加验证功能

    Vue.js的主要特点包括数据驱动和组件化，通过数据绑定、指令、组件等概念，可以高效地构建用户界面。 知识点二：Element UI介绍 Element UI是一套基于Vue.js的桌面端组件库，用于快速构建简洁、优雅的Web界面。它为...

    Vue界面可视化设计器，支持任何html标签以及项目中引用的组件，可实现仅通过配置文件就能增加支持的组件和组件属性.zip

    8. **性能优化**: 使用Vue界面可视化设计器，开发者可以预览设计效果，同时确保生成的代码保持Vue的最佳实践，如懒加载、组件复用等，以达到优秀的运行时性能。 9. **可扩展性**: 设计器通常会有丰富的插件系统或...

    基于ssm+vue办公自动化管理系统.zip

    《基于SSM+Vue的办公自动化管理系统详解》 在当今数字化时代，办公自动化管理系统已经成为企业提升效率、优化工作流程的重要工具。本系统采用SSM（Spring、SpringMVC、MyBatis）作为后端框架，结合Vue.js进行前端...

    Element UI表单设计及代码生成器，支持可视化拖拽、代码下载、界面设计等。

    4. 自动化生成：除了基本的表单元素外，该工具可能还支持根据数据库模型自动生成表单，这样当后端数据结构发生变化时，前端表单也能随之更新，减少了前后端协同工作的复杂性。 5. 万能表单：这意味着这款工具不仅...

    vue+Iview+gulp 生成文档说明

    通过Vue.js 构建用户界面，使用 IView 增强组件功能，借助 Gulp 自动化构建流程，并通过生成文档分享知识，可以打造出高效且协同的开发环境。团队成员可以通过提供的链接地址深入学习和参考，以更好地利用这些工具来...

    vue-multipage vue 模块化开发打包

    Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。在大型项目中，为了更好地管理代码，提高可维护性和复用性，开发者通常会选择模块化开发。Vue-multipage 就是针对Vue.js 应用的多页面模块化构建工具...

    基于Vue实现一个便捷好用的简历模板

    组件是Vue.js的基石，它允许我们将界面拆分为可复用的部分。响应式数据绑定使得数据与视图之间的同步变得简单。在构建简历模板时，我们可以将个人信息、工作经历、项目经验等视为独立组件，方便管理和维护。 二、...

    用vue写的可视化大屏

    在“用vue写的可视化大屏”项目中，Vue.js 负责整个用户界面的构建，通过其组件系统来组织和管理界面的各个部分。 Echarts 是一个基于 JavaScript 的数据可视化库，它支持多种图表类型，如柱状图、折线图、饼图等，...

    vuereact自动化创建单页面多页面应用项目调试项目打包的一体化cli工具

    针对标题"vue react自动化创建单页面多页面应用项目调试项目打包的一体化cli工具"以及描述，我们可以深入探讨这个CLI工具在Vue.js和React开发中的应用。 Vue.js和React都是当前非常流行的JavaScript框架，用于构建...

Magicbox
Global site tag (gtag.js) - Google Analytics