【4858美高梅】Element贯彻表格里的增加和删除改查,中哪些促成动态表单增加和删除改查

By admin in 4858美高梅 on 2019年6月15日

多年来项目中遇见的急需是要操作大量的表单,从前的类型中有做过这方的商量,只不过是用jquery来操作。

vue2 中什么落到实处动态表单增加和删除改查实例,vue2表单

不久前项目中遇到的需借使要操作大批量的表单,在此以前的品类中有做过那方的研讨,只但是是用jquery来操作。

项目A

先轻便说说从前项目A中的应用场景,恐怕有青年伴儿也遇到同样的供给。A项目是集团的OA系统中有的种类,是用java的jsp渲染的页面,供给是要改成:嵌入应用软件中显得,前后端分离,
后端重临的从头到尾的经过,还无法改改,
只是后端同事做了下接口管理,重临给前端的是一大堆的表单数据。

各类表单都有八个字段表示它的性质:

  1. 是还是不是可编写制定
  2. 表单类型 (text, textarea, select, radio, checkbox, hidden等 )
  3. 与之联合浮动的别样表单
  4. 。。。在此以前的方案正是逐一表单类型和字段属性进行剖断,调用分裂的UI组件(如时间日历接纳器等)

项目B

现行遭逢的档案的次序,展现类型少多数,第多少个想到的即使同样的艺术,可是此番运用的是Vue的双向绑定。

以下是自身在python后端项目中的经验,假使没风乐趣能够一直看最后的动态表单部分

1 python 后端项目中怎么着引进Vue

花色B用的是python的jinjia2的模板, 一样都以 {{}}
去剖析数据,这种景观下怎么办呢?

{% raw %}
<script type="text/x-template" id="dialog-wrap">
<div class="ms-dialog-wrap" v-show="visible">
 <div class="ms-dialog-inner">
  <div class="ms-dialog-title">{{title}}</div>
  <div class="ms-dialog-body">
   <div class="ms-dialog-content">
    <slot></slot>
   </div>
   <div class="ms-dialog-actions">
    <a class="ms-button" @click="cancelAction">取消</a>
    <a class="ms-button ms-success" @click="confirmSuccess">确定</a>
   </div>
  </div>
 </div>
 <div class="ms-overlayer" @click="cancelAction"></div>
</div>
</script>
{% endraw %}

jinjia第22中学选用 raw
能够阻碍深入分析个中的代码,那样就能够引进大家的vue模板了,这里是自己写的贰个dialog弹框的零件

2 定义组件

【4858美高梅】Element贯彻表格里的增加和删除改查,中哪些促成动态表单增加和删除改查。此处以dialog弹窗组件为例子,直接上代码

// dialog弹框
Vue.component('ms-dialog', {
 name: 'ms-dialog',
 template: '#dialog-wrap',
 data: function () {
  return {
  }
 },
 props: {
  title: String,
  value: {
   type: Boolean,
   required: false
  }
 },
 computed: {
  visible: function () {
   return this.value
  }
 },
 watch: {
  visible: function (newVal) {
   if (newVal) {
    document.addEventListener('wheel', this.disabledScroll, false)
   } else {
    document.removeEventListener('wheel', this.disabledScroll, false)
   }
  }
 },
 methods: {
  confirmSuccess: function () {
   this.$emit('confirm-success')
  },
  cancelAction: function () {
   this.$emit('input', false)
  },
  disabledScroll: function (e) {
   e.preventDefault()
  }
 },
 beforeDestroy: function () {
  document.removeEventListener('scroll', this.disabledScroll, false)
 }
})

动态表单组件

貌似的供给是:

  1. 贰个列表,能够完结列表的动态增加,删除。
  2. 列表中的每一类是动态的表单,表单个数不鲜明,
  3. 有付出成效,提交只怕可以保存整个表单
  4. 保存的表单,通过接口调回后,回填表单,还能够重复修改、扩大、删除等

1 如何变化动态表单

<template v-for="item in lists">
   <div class="list-item" v-if="list.type === 'input'">
    <label>用户名</label>
    <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
   </div>
   <div class="list-item" v-if="list.type === 'input'">
    <label>密码</label>
    <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
   </div>
   <div class="list-item" v-if="list.type === 'textarea'">
    <label>说明</label>
    <textarea rows="3" v-model="item.value" :value="list.defaultValue" class="form-control"></textarea>
   </div>
   <div class="list-item" v-if="list.type === 'select'">
    <label>性别</label>
    <select v-model="list.value" :value="list.defaultValue">
      <option v-for="sub in list.source" :value="sub.value">{{sub.label}}</option>
    </select>
   </div>
</template>

我们的与后端商讨好的数据格式能够是那样的;

lists: [{
 type: 'input',
 defaultValue: 'tom',
 value: 'tom'
}, {
 type: 'input',
 defaultValue: '123456',
 value: '123456'
}, {
 type: 'textarea',
 defaultValue: '123456',
 value: '123456'
}, {
 type: 'select',
 defaultValue: '0',
 value: '0',
 source: [{
  value: '1',
  label: '男'
 }, {
  value: '1,
  label: '女'
 }]
}]

这么一个动态模板就生成了,其余更加多类型都足以定义。那份模板数据,一般是亟需缓存的。因为接下去的
增添操作也亟需那份数据。

增加操作

上面的template只是内部三个动态列表。

<div v-for="book in books">
  <template v-for="item in book.lists">
   ......
  </template>
</div>
<div class="actions">
<button @click="add"></button>
</div>

add的法子一般是:

methods: {
 add: function () {
  this.books.push({
  lists: [{
   type: 'input',
   defaultValue: 'tom',
   value: 'tom'
  }, {
   type: 'input',
   defaultValue: '123456',
   value: '123456'
  }, {
   type: 'textarea',
   defaultValue: '123456',
   value: '123456'
  }, {
   type: 'select',
   defaultValue: '0',
   value: '0',
   source: [{
    value: '1',
    label: '男'
   }, {
    value: '1,
    label: '女'
   }]
  }]
 })
 },

此处须要留意的是,即便那份模板的多少,你是透过在data属性中定义的字段去缓存的,那有比一点都不小希望遇见的是您通过丰裕操作之后的表单的值会,会趁着当中的某部表单的值一齐联合浮动。

切实原因,估计是这里的多寡已经是成为响应式的了, 又大概您
通超过实际例化后的值去缓存这份模板数据,或然结果要么如此。
切实代码大概是那般的:

var vm = new Vue({
  data: {
    books: [],
    cacheTemplate: null
  },
  methods: {
    getForms: function (argument) {
      this.$http.post(url, paras).then(res => {
        // 此处缓存了这份模板数据,cacheTemplate中的数据已经变成响应式的了
        this.cacheTemplate = res.body.data
        this.books.push(res.body.data) // 创建第一动态表单列表

        // 或者你是这是定义的的, 此时data中没有cacheTemplate这个值, 
        // 这样定义按理说是非响应式的,但实际情况并非如此,在项目中发现它还是会影响其他表单
        vm.cacheTemplate = res.body.data
        this.books.push(res.body.data) // 创建第一动态表单列表
      }, res => {

      })
    },
    add: function () {
      // 此处你会发现你新创建的表单的值会影响其他表单
      // log出来this.cacheTemplate你会发现里面的值已经发生了变换
      this.books.push(this.cacheTemplate)
    }
  }
})

那边this.cacheTemplate的值怎么会发出转移,未有搞了然,
估量原因只怕是成为响应式了,vue中会实时监察追踪,对vue原理精晓好的小同伙能够商量告诉本人原因。

下边说下自家的消除措施:
作者任由您是否响应式的,因为是目的,你才具监督到调换,那本身把您形成字符串不就好了。
间接上代码:

var vm = new Vue({
  data: {
    books: [],
    cacheTemplate: null
  },
  methods: {
    getForms: function (argument) {
      this.$http.post(url, paras).then(res => {
        // 此处同样缓存了这份模板数据,不同的是把它变成了字符串
        this.cacheTemplate = JOSN.stringify(res.body)
        this.books.push(res.body) // 创建第一动态表单列表
      }, res => {

      })
    },
    add: function () {
      // 此处转化成json对象,你发现this.cacheTemplate中的值是没有变换的。
      var cacheTemplate = JSON.parse(this.cacheTemplate)
      this.books.push(cacheTemplate)
    }
  }
})

那样任何表单值调换的时候都不会潜移默化到自家那份模板的数码,难点一举成功了。

如上正是本文的全体内容,希望对咱们的上学抱有辅助,也指望大家多多协助帮客之家。

中什么贯彻动态表单增加和删除改查实例,vue2表单
方今项目中相见的必要是要操作多量的表单,以前的体系中有做过那方的钻研,只不过是用…

近来项目中相见的急需是要操作大量的表单,从前的品种中有做过那方的钻研,只可是是用jquery来操作。

新品类应用的是vue.js 后来察觉饿了呢前端编写的一套框架Element
()来合营vue.js举办体制填入

项目A

项目A

先轻巧说说以前项目A中的应用场景,或者有青年伴儿也遇上同样的急需。A项目是集团的OA系统中部分种类,是用java的jsp渲染的页面,需要是要改成:嵌入APP中彰显,前后端分离,
后端再次来到的内容,还不能够修改,
只是后端同事做了下接口管理,重回给前端的是一大堆的表单数据。

4858美高梅 ,各种表单都有多少个字段表示它的质量:

  • 是否可编写制定
  • 表单类型 (text, textarea, select, radio, checkbox, hidden等 )
  • 与之联合浮动的其余表单
  • 。。。
    此前的方案就是逐一表单类型和字段属性进行剖断,调用分裂的UI组件(如时间日历选拔器等)

事先用过angularjs 用到新兴 开掘更是难学 于是就调控用vue.js

先轻便说说以前项目A中的应用场景,恐怕有年轻人伴儿也遇上一样的急需。A项目是信用社的OA系统中一些种类,是用java的jsp渲染的页面,必要是要改成:嵌入应用程式中显得,前后端分离,
后端再次回到的开始和结果,还无法修改,
只是后端同事做了下接口管理,再次回到给前端的是一大堆的表单数据。

项目B

今昔遇到的等级次序,展示类型少好些个,第一个想到的尽管同一的主意,但是此番运用的是Vue的双向绑定。

以下是自身在python后端项目中的经验,若是没风乐趣能够一直看最终的动态表单部分

下边就介绍一下vue.js应用在报表里的增加和删除改查

每一种表单都有三个字段表示它的性质:

1 python 后端项目中什么引进Vue

项目B用的是python的jinjia2的沙盘, 一样都以 {{}}
去深入分析数据,这种情状下如何是好吧?

{% raw %}
<script type="text/x-template" id="dialog-wrap">
<div class="ms-dialog-wrap" v-show="visible">
  <div class="ms-dialog-inner">
    <div class="ms-dialog-title">{{title}}</div>
    <div class="ms-dialog-body">
      <div class="ms-dialog-content">
        <slot></slot>
      </div>
      <div class="ms-dialog-actions">
        <a class="ms-button" @click="cancelAction">取消</a>
        <a class="ms-button ms-success" @click="confirmSuccess">确定</a>
      </div>
    </div>
  </div>
  <div class="ms-overlayer" @click="cancelAction"></div>
</div>
</script>
{% endraw %}

jinjia2中运用 raw
能够阻挡剖判当中的代码,那样就足以引入大家的vue模板了,这里是本身写的三个dialog弹框的零部件
2 定义组件
那边以dialog弹窗组件为例子,直接上代码

// dialog弹框
Vue.component('ms-dialog', {
  name: 'ms-dialog',
  template: '#dialog-wrap',
  data: function () {
    return {
    }
  },
  props: {
    title: String,
    value: {
      type: Boolean,
      required: false
    }
  },
  computed: {
    visible: function () {
      return this.value
    }
  },
  watch: {
    visible: function (newVal) {
      if (newVal) {
        document.addEventListener('wheel', this.disabledScroll, false)
      } else {
        document.removeEventListener('wheel', this.disabledScroll, false)
      }
    }
  },
  methods: {
    confirmSuccess: function () {
      this.$emit('confirm-success')
    },
    cancelAction: function () {
      this.$emit('input', false)
    },
    disabledScroll: function (e) {
      e.preventDefault()
    }
  },
  beforeDestroy: function () {
    document.removeEventListener('scroll', this.disabledScroll, false)
  }
})

率先引进一下element的js

  1. 是或不是可编写制定
  2. 表单类型 (text, textarea, select, radio, checkbox, hidden等 )
  3. 与之联合浮动的其余表单
  4. 。。。从前的方案就是种种表单类型和字段属性实行剖断,调用不一样的UI组件(如时间日历选用器等)

动态表单组件

相似的需纵然:

  • 一个列表,能够完毕列表的动态增进,删除。
  • 列表中的每一种是动态的表单,表单个数不鲜明,
  • 有付出效率,提交或许能够保留整个表单
  • 封存的表单,通过接口调回后,回填表单,还可以够再度修改、扩大、删除等
<script src="plugins/element-ui/index.js"></script>

项目B

1 怎样转移动态表单
<template v-for="item in lists">
      <div class="list-item" v-if="list.type === 'input'">
        <label>用户名</label>
        <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
      </div>
      <div class="list-item" v-if="list.type === 'input'">
        <label>密码</label>
        <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
      </div>
      <div class="list-item" v-if="list.type === 'textarea'">
        <label>说明</label>
        <textarea rows="3" v-model="item.value" :value="list.defaultValue" class="form-control"></textarea>
      </div>
      <div class="list-item" v-if="list.type === 'select'">
        <label>性别</label>
        <select v-model="list.value" :value="list.defaultValue">
            <option v-for="sub in list.source" :value="sub.value">{{sub.label}}</option>
        </select>
      </div>
</template>

大家的与后端商讨好的数量格式可以是如此的;

lists:  [{
  type: 'input',
  defaultValue: 'tom',
  value: 'tom'
}, {
  type: 'input',
  defaultValue: '123456',
  value: '123456'
}, {
  type: 'textarea',
  defaultValue: '123456',
  value: '123456'
}, {
  type: 'select',
  defaultValue: '0',
  value: '0',
  source: [{
    value: '1',
    label: '男'
  }, {
    value: '1,
    label: '女'
  }]
}]

那般贰个动态模板就生成了,别的更七类别都能够定义。那份模板数据,一般是亟需缓存的。因为接下去的
加多操作也急需那份数据。

接下来引入供给选取的vue相关的js文件

明日赶过的项目,显示类型少好些个,第一个想到的就算一样的诀窍,但是这一次使用的是Vue的双向绑定。

增加操作

上边包车型客车template只是中间一个动态列表。

<div v-for="book in books">
    <template v-for="item in book.lists">
      ......
    </template>
</div>
<div class="actions">
<button @click="add"></button>
</div>

add的法子一般是:

methods: {
 add:  function () {
   this.books.push({
    lists:  [{
      type: 'input',
      defaultValue: 'tom',
      value: 'tom'
    }, {
      type: 'input',
      defaultValue: '123456',
      value: '123456'
    }, {
      type: 'textarea',
      defaultValue: '123456',
      value: '123456'
    }, {
      type: 'select',
      defaultValue: '0',
      value: '0',
      source: [{
        value: '1',
        label: '男'
      }, {
        value: '1,
        label: '女'
      }]
    }]
 })
 },

此地供给专注的是,若是这份模板的数据,你是通过在data属性中定义的字段去缓存的,那有望遇见的是你通过丰裕操作之后的表单的值会,会趁着在那之中的某部表单的值一同联合浮动。
实际原因,估量是这里的数量已经是成为响应式的了, 又或许您
通超过实际例化后的值去缓存那份模板数据,或许结果要么如此。
实际代码恐怕是这么的:

var vm = new Vue({
    data: {
        books: [],
        cacheTemplate: null
    },
    methods: {
        getForms: function (argument) {
            this.$http.post(url, paras).then(res => {
                // 此处缓存了这份模板数据,cacheTemplate中的数据已经变成响应式的了, 此处cacheTemplate是引用类型
                this.cacheTemplate = res.body.data
                this.books.push(res.body.data) // 创建第一动态表单列表
            }, res => {

            })
        },
        add: function () {
            // 因为是引用类型,所以cacheTemplate属性值的变化必然影响其他和它相同属性的值
                     this.books.push(this.cacheTemplate)
        }
    }
})

此间的化解方式: 是要换来纵深复制
向来上代码:

var vm = new Vue({
    data: {
        books: [],
        cacheTemplate: null
    },
    methods: {
        getForms: function (argument) {
            this.$http.post(url, paras).then(res => {

                // 此处同样缓存了这份模板数据,不同的是把它变成了字符串, 深度复制
                this.cacheTemplate = JOSN.stringify(res.body)
                this.books.push(res.body) // 创建第一动态表单列表
            }, res => {

            })
        },
        add: function () {
            // 此处转化成json对象
            var cacheTemplate = JSON.parse(this.cacheTemplate)
            this.books.push(cacheTemplate)
        }
    }
})

假如认为本文不错的话,迎接点赞。如有毛病, 大家齐声调换和上学

<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>

以下是自家在python后端项目中的经验,倘使未有兴趣能够间接看最后的动态表单部分

下边先说一下html文件

1 python 后端项目中怎么样引进Vue

<div id="user">
 <!-- 操作 -->
 <ul class="btn-edit fr">
 <li >
 <el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>
 <el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >删除</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
 </li>
 </ul>
 <!-- 用户列表-->
 <el-table :data="users"
 stripe
 v-loading="loading"
 element-loading-text="拼命加载中..."
 style="width: 100%"
 height="443"
 @sort-change="tableSortChange"
 @selection-change="tableSelectionChange">
 <el-table-column type="selection"
 width="60">
 </el-table-column>
 <el-table-column sortable="custom" prop="username"
 label="用户名"
 width="120">
 </el-table-column>
 <el-table-column prop="name"
 label="姓名"
 width="120">
 </el-table-column>
 <el-table-column prop="phone"
 label="手机"
 >
 </el-table-column>
 <el-table-column prop="email"
 label="邮箱">
 </el-table-column>
 <el-table-column prop="create_time" sortable="custom" inline-template
 label="注册日期"
 width="260">
 <div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>
 </el-table-column>
 <el-table-column inline-template
 label="操作"
 width="250">
 <el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
 <el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
 </el-table-column>
 </el-table>
 <!--分页begin-->
 <el-pagination class="tc mg"
 :current-page="filter.page"
 :page-sizes="[10, 20, 50, 100]"
 :page-size="filter.per_page"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total_rows"
 @size-change="pageSizeChange"
 @current-change="pageCurrentChange">
 </el-pagination>
 <!--分页end-->
</div>

类型B用的是python的jinjia2的模板, 同样都是 {{}}
去深入分析数据,这种情景下如何做吧?

这一段是element的表单以及编辑还应该有分页样式 能够平素复制进来
个中增加了部分click操作 后边需求动用,然后大家就从头引进js

{% raw %}
<script type="text/x-template" id="dialog-wrap">
<div class="ms-dialog-wrap" v-show="visible">
 <div class="ms-dialog-inner">
  <div class="ms-dialog-title">{{title}}</div>
  <div class="ms-dialog-body">
   <div class="ms-dialog-content">
    <slot></slot>
   </div>
   <div class="ms-dialog-actions">
    <a class="ms-button" @click="cancelAction">取消</a>
    <a class="ms-button ms-success" @click="confirmSuccess">确定</a>
   </div>
  </div>
 </div>
 <div class="ms-overlayer" @click="cancelAction"></div>
</div>
</script>
{% endraw %}

精晓过vuejs的相应明了这么的布局 data里面填写大家赢得的数据 一些平整
定义一些变量

jinjia第22中学接纳 raw
能够阻止剖判其中的代码,这样就可以引进咱们的vue模板了,这里是自己写的贰个dialog弹框的组件

在methods举办我们的操作

2 定义组件

 vm = new Vue({
 el: '#user',
 data:{},
 methods:{}
 })

此地以dialog弹窗组件为例子,直接上代码

第一 大家先从读取数据初始

// dialog弹框
Vue.component('ms-dialog', {
 name: 'ms-dialog',
 template: '#dialog-wrap',
 data: function () {
  return {
  }
 },
 props: {
  title: String,
  value: {
   type: Boolean,
   required: false
  }
 },
 computed: {
  visible: function () {
   return this.value
  }
 },
 watch: {
  visible: function (newVal) {
   if (newVal) {
    document.addEventListener('wheel', this.disabledScroll, false)
   } else {
    document.removeEventListener('wheel', this.disabledScroll, false)
   }
  }
 },
 methods: {
  confirmSuccess: function () {
   this.$emit('confirm-success')
  },
  cancelAction: function () {
   this.$emit('input', false)
  },
  disabledScroll: function (e) {
   e.preventDefault()
  }
 },
 beforeDestroy: function () {
  document.removeEventListener('scroll', this.disabledScroll, false)
 }
})

放入你的url

动态表单组件

users是表格绑定的数组 也是存放从后台获取的多寡

一般的急需是:

将索要出示的数码放在filter中

  1. 三个列表,能够兑现列表的动态增进,删除。
  2. 列表中的各个是动态的表单,表单个数不分明,
  3. 有付出功效,提交也许能够保存整个表单
  4. 封存的表单,通过接口调回后,回填表单,还足以重新修改、增添、删除等
vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {
 return {
 url: 'url',
 users: [],
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 };
 },
 methods:{}
})

1 怎样变化动态表单

接下去大家增多methods

<template v-for="item in lists">
   <div class="list-item" v-if="list.type === 'input'">
    <label>用户名</label>
    <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
   </div>
   <div class="list-item" v-if="list.type === 'input'">
    <label>密码</label>
    <input type="text" v-model="item.value" :value="list.defaultValue" class="form-control">
   </div>
   <div class="list-item" v-if="list.type === 'textarea'">
    <label>说明</label>
    <textarea rows="3" v-model="item.value" :value="list.defaultValue" class="form-control"></textarea>
   </div>
   <div class="list-item" v-if="list.type === 'select'">
    <label>性别</label>
    <select v-model="list.value" :value="list.defaultValue">
      <option v-for="sub in list.source" :value="sub.value">{{sub.label}}</option>
    </select>
   </div>
</template>

pageSizeChange() 以及 pageCurrentChange()是用于分页的函数

咱俩的与后端切磋好的数额格式能够是那样的;

在query() 是用于寻找的种类

lists: [{
 type: 'input',
 defaultValue: 'tom',
 value: 'tom'
}, {
 type: 'input',
 defaultValue: '123456',
 value: '123456'
}, {
 type: 'textarea',
 defaultValue: '123456',
 value: '123456'
}, {
 type: 'select',
 defaultValue: '0',
 value: '0',
 source: [{
  value: '1',
  label: '男'
 }, {
  value: '1,
  label: '女'
 }]
}]

getUsers() 正是用于获取数据

那般二个动态模板就生成了,其余更七类别都能够定义。那份模板数据,一般是急需缓存的。因为接下去的
增加操作也急需这份数据。

methods: {
 pageSizeChange(val) {
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 this.filter.page = val;
 this.getUsers();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 获取用户列表
 getUsers() {
 this.loading = true;

 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('错了哦,这是一条错误消息');
 this.loading = false;
 });

 },
 }

丰富操作

读取完数据之后 我们得以望见数据是比照每页十条展现 是上边大家暗中同意设置的

地方的template只是内部三个动态列表。

上面进行删除操作 删除作者设置的是单挑删除以及多条删除

<div v-for="book in books">
  <template v-for="item in book.lists">
   ......
  </template>
</div>
<div class="actions">
<button @click="add"></button>
</div>

因为除去供给选中 所以大家需求进入选中的变量

add的不二等秘书技一般是:

vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {

 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已选择项
 };
 },
methods: {
 add: function () {
  this.books.push({
  lists: [{
   type: 'input',
   defaultValue: 'tom',
   value: 'tom'
  }, {
   type: 'input',
   defaultValue: '123456',
   value: '123456'
  }, {
   type: 'textarea',
   defaultValue: '123456',
   value: '123456'
  }, {
   type: 'select',
   defaultValue: '0',
   value: '0',
   source: [{
    value: '1',
    label: '男'
   }, {
    value: '1,
    label: '女'
   }]
  }]
 })
 },

接下来在methods也要加盟选中的函数

此间需求专注的是,即便那份模板的多少,你是通过在data属性中定义的字段去缓存的,这有望遇见的是您通过增多操作之后的表单的值会,会趁机在这之中的某部表单的值一起联合浮动。

 tableSelectionChange(val) {
 console.log(val);
 this.selected = val;
 },


// 删除单个用户

 removeUser(user) {
 this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' }) 
 .then(() => { // 向请求服务端删除 
 var resource = this.$resource(this.url + "{/id}"); 
 resource.delete({ id: user.id }) 
 .then((response) => { 
 this.$message.success('成功删除了用户' + user.username + '!'); this.getUsers(); }) 
 .catch((response) => { 
 this.$message.error('删除失败!'); 
 }); 
 }) .catch(() => { 
 this.$message.info('已取消操作!');
 }); 
}, 
//删除多个用户 
removeUsers() { 
 this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' }) 
 .then(() => { 
 console.log(this.selected); 
 var ids = []; //提取选中项的id 
 $.each(this.selected,(i, user)=> { ids.push(user.id); }); // 向请求服务端删除var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",") 
 }) .then((response) => { 
 .catch((response) => { 
 this.$message.error('删除失败!'); 
 }); 
 }) 
 .catch(() => { 
 }); 
}

现实原因,估摸是此处的多寡现已是成为响应式的了, 又恐怕你
通超过实际例化后的值去缓存那份模板数据,也许结果要么如此。
切实代码恐怕是这样的:

接下去就开始展览到编辑和丰富

var vm = new Vue({
  data: {
    books: [],
    cacheTemplate: null
  },
  methods: {
    getForms: function (argument) {
      this.$http.post(url, paras).then(res => {
        // 此处缓存了这份模板数据,cacheTemplate中的数据已经变成响应式的了
        this.cacheTemplate = res.body.data
        this.books.push(res.body.data) // 创建第一动态表单列表

        // 或者你是这是定义的的, 此时data中没有cacheTemplate这个值, 
        // 这样定义按理说是非响应式的,但实际情况并非如此,在项目中发现它还是会影响其他表单
        vm.cacheTemplate = res.body.data
        this.books.push(res.body.data) // 创建第一动态表单列表
      }, res => {

      })
    },
    add: function () {
      // 此处你会发现你新创建的表单的值会影响其他表单
      // log出来this.cacheTemplate你会发现里面的值已经发生了变换
      this.books.push(this.cacheTemplate)
    }
  }
})

鉴于删除和编辑要求参预表单

这里this.cacheTemplate的值怎么会爆发转移,未有搞通晓,
推断原因可能是成为响应式了,vue中会实时督查追踪,对vue原理明白好的伴儿能够斟酌告诉自个儿原因。

<!-- 创建用户 begin-->
 <el-dialog title="创建用户" v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" >
 <el-form id="#create" :model="create" :rules="rules" ref="create" label-width="100px">
 <el-form-item label="用户名" prop="username">
 <el-input v-model="create.username"></el-input>
 </el-form-item>
 <el-form-item label="姓名" prop="name">
 <el-input v-model="create.name"></el-input>
 </el-form-item>
 <el-form-item label="密码" prop="password">
 <el-input v-model="create.password" type="password" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item label="确认密码" prop="checkpass">
 <el-input v-model="create.checkpass" type="password"></el-input>
 </el-form-item>
 <el-form-item label="电话" prop="phone">
 <el-input v-model="create.phone"></el-input>
 </el-form-item>
 <el-form-item label="邮箱" prop="email">
 <el-input v-model="create.email"></el-input>
 </el-form-item>
 <el-form-item label="是否启用">
 <el-switch on-text="" off-text="" v-model="create.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogCreateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="createLoading" @click="createUser">确 定</el-button>
 </div>
 </el-dialog>
 <!-- 修改用户 begin-->
 <el-dialog title="修改用户信息" v-model="dialogUpdateVisible" :close-on-click-modal="false" :close-on-press-escape="false">
 <el-form id="#update" :model="update" :rules="updateRules" ref="update" label-width="100px">
 <el-form-item label="姓名" prop="name">
 <el-input v-model="update.name"></el-input>
 </el-form-item>
 <el-form-item label="电话" prop="phone">
 <el-input v-model="update.phone"></el-input>
 </el-form-item>
 <el-form-item label="邮箱" prop="email">
 <el-input v-model="update.email"></el-input>
 </el-form-item>
 <el-form-item label="是否启用">
 <el-switch on-text="" off-text="" v-model="update.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogUpdateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="updateLoading" @click="updateUser">确 定</el-button>
 </div>
 </el-dialog>

上面说下小编的减轻方法:
作者不管您是还是不是响应式的,因为是目的,你才干监督到转变,那自身把您产生字符串不就好了。
一向上代码:

因为有表单 所以我们供给参与表单验证

var vm = new Vue({
  data: {
    books: [],
    cacheTemplate: null
  },
  methods: {
    getForms: function (argument) {
      this.$http.post(url, paras).then(res => {
        // 此处同样缓存了这份模板数据,不同的是把它变成了字符串
        this.cacheTemplate = JOSN.stringify(res.body)
        this.books.push(res.body) // 创建第一动态表单列表
      }, res => {

      })
    },
    add: function () {
      // 此处转化成json对象,你发现this.cacheTemplate中的值是没有变换的。
      var cacheTemplate = JSON.parse(this.cacheTemplate)
      this.books.push(cacheTemplate)
    }
  }
})

以及丰裕和编辑弹出的情景

如此任何表单值转变的时候都不会潜移默化到自己那份模板的多寡,难题一蹴即至了。

vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {

 var validatePass = (rule, value, callback) => {
 if (value === '') {
 callback(new Error('请再次输入密码'));
 } else if (value !== this.create.password) {
 callback(new Error('两次输入密码不一致!'));
 } else {
 callback();
 }
 };

 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 create: {
 id: '',
 username: '',
 name: '',
 password: '',
 checkpass: '',
 phone: '',
 email: '',
 is_active: true
 },
 currentId:'',
 update:{
 name: '',
 phone: '',
 email: '',
 is_active: true
 },
 rules: {
 name: [
 { required: true, message: '请输入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
 ],
 username: [
 { required: true, message: '请输入用户名', trigger: 'blur' },
 { min: 3, max: 25, message: '长度在 3 到 25 个字符'},
 { pattern:/^[A-Za-z0-9]+$/, message: '用户名只能为字母和数字'}
 ],
 password: [
 { required: true, message: '请输入密码', trigger: 'blur' },
 { min: 6, max: 25, message: '长度在 6 到 25 个字符'}
 ],
 checkpass: [
 { required: true, message: '请再次输入密码', trigger: 'blur' },
 { validator: validatePass}
 ],
 email: [
 { type: 'email', message: '邮箱格式不正确'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
 ]
 },
 updateRules: {
 name: [
 { required: true, message: '请输入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
 ],
 email: [
 { type: 'email', message: '邮箱格式不正确'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
 ]
 },
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已选择项
 dialogCreateVisible: false, //创建对话框的显示状态
 dialogUpdateVisible: false, //编辑对话框的显示状态
 createLoading: false,
 updateLoading: false,
 };
 },

如上正是本文的全体内容,希望对大家的读书抱有援助,也希望大家多多帮助脚本之家。

上边就加入增多和编辑的函数

你恐怕感兴趣的作品:

  • vue达成表格增加和删除改查效果的实例代码
  • vue增加和删除改查的回顾操作
  • vue达成表格数据的增加和删除改查
  • Spring boot + mybatis + Vue.js + ElementUI
    完成数据的增删改查实例代码(二)
  • Spring boot + mybatis + Vue.js + ElementUI
    完成数据的增加和删除改查实例代码(一)
  • vue.js+Element落成表格里的增加和删除改查
  • Vue+Mock.js模拟登入和表格的增加和删除改查成效
methods: {
 tableSelectionChange(val) {
 console.log(val);
 this.selected = val;
 },
 pageSizeChange(val) {
 console.log(`每页 ${val} 条`);
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 console.log(`当前页: ${val}`);
 this.filter.page = val;
 this.getUsers();
 },
 setCurrent(user){
 this.currentId=user.id;
 this.update.name=user.name;
 this.update.phone=user.phone;
 this.update.email=user.email;
 this.update.is_active=user.is_active;
 this.dialogUpdateVisible=true;
 },
 // 重置表单
 reset() {
 this.$refs.create.resetFields();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 获取用户列表
 getUsers() {
 this.loading = true;

 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('错了哦,这是一条错误消息');
 this.loading = false;
 });

 },

 // 创建用户
 createUser() {
 // 主动校验
 this.$refs.create.validate((valid) => {
 if (valid) {
 this.create.id=getuuid();
 this.createLoading=true;
 var resource = this.$resource(this.url);
 resource.save(this.create)
 .then((response) => {
 this.$message.success('创建用户成功!');
 this.dialogCreateVisible=false;
 this.createLoading=false;
 this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.createLoading=false;
 });
 } 
 else {
 //this.$message.error('存在输入校验错误!');
 return false;
 }
 });

 },

 // 更新用户资料
 updateUser() {
 this.$refs.update.validate((valid) => {
 if (valid) {
 this.updateLoading=true;
 var actions = {
 update: {method: 'patch'}
 }
 var resource = this.$resource(this.url,{},actions);
 resource.update({"ids":this.currentId},this.update)
 .then((response) => {
 this.$message.success('修改用户资料成功!');
 this.dialogUpdateVisible=false;
 this.updateLoading=false;
 //this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 console.log(data);
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.updateLoading=false;
 });
 } 
 else {
 //this.$message.error('存在输入校验错误!');
 return false;
 }
 });
 },

 // 删除单个用户
 removeUser(user) {
 this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' })
 .then(() => {
 // 向请求服务端删除
 var resource = this.$resource(this.url + "{/id}");
 resource.delete({ id: user.id })
 .then((response) => {
 this.$message.success('成功删除了用户' + user.username + '!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 })
 .catch(() => {
 this.$message.info('已取消操作!');
 });
 },

 //删除多个用户
 removeUsers() {
 this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
 .then(() => {
 console.log(this.selected);
 var ids = [];
 //提取选中项的id
 $.each(this.selected,(i, user)=> {
 ids.push(user.id);
 });
 // 向请求服务端删除
 var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",") })
 .then((response) => {
 this.$message.success('删除了' + this.selected.length + '个用户!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 })
 .catch(() => {
 this.$Message('已取消操作!');
 });
 }
 }

那正是全方位增加和删除改查的经过

demo地址:

以上便是本文的全体内容,希望对大家的学习抱有支持,也期望大家多多帮忙脚本之家。

您大概感兴趣的作品:

  • vue达成表格增加和删除改查效果的实例代码
  • vue增加和删除改查的简便操作
  • vue达成表格数据的增加和删除改查
  • vue第22中学怎样落到实处动态表单增加和删除改查实例
  • Spring boot + mybatis + Vue.js + ElementUI
    实现多少的增加和删除改查实例代码(二)
  • Spring boot + mybatis + Vue.js + ElementUI
    完成多少的增加和删除改查实例代码(一)
  • Vue+Mock.js模拟登陆和表格的增加和删除改查功效

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有