js仿Metronic高级表格,Vue自定义指令实现checkbox全选功能的方法_vue

近期做的三个类型供给用到Vue落成全选效率,参考了须臾间网络的做法,开接纳属性总结的复用性不高,于是选取自定义指令,但互连网的做法多数是会对本来数占有自然的格式供给,何况还没回来结果,于是做了改革。

Vue.js仿Metronic高等表格(二)数据渲染,vue.jsmetronic

上篇使用Vue.js制作仿Metronic高等表格(一)静态设计介绍了要求、原型设计以致静态页面达成,那篇讲明怎么着利用Vue渲染数据,完成动态呈现。

报表数据

先定义一个数组来保存全体数据:

var vm = new Vue({ 
 el:'#content', 
 data: { 
  book_list: [ 
   {id:1, name:"标准日本语", type: "文化", price:19.00, time: 1492502043}, 
   {id:2, name:"微观经济学", type: "经济", price:29.00, time: 1492502143}, 
   {id:3, name:"大数据时代", type: "经济", price:39.00, time: 1492502243}, 
   {id:4, name:"TCP/IP协议详解", type: "科技", price:49.00, time: 1492502343}, 
   {id:5, name:"大学英语", type: "文化", price:59.00, time: 1492502443}, 
  ] 
 } 
}); 

使用v-for指令来渲染,将tr标签改写成:

<tr v-for="(book, key) in book_list"> 
 <td v-text="key + 1"></td> 
 <td v-text="book.name"></td> 
 <td v-text="book.type"></td> 
 <td v-text="book.price"></td> 
 <td v-text="book.time"></td> 
 <td> 
  <button class="btn btn-info btn-xs"> 
   <i class="fa fa-pencil"></i> 
   修改 
  </button> 
  <button class="btn btn-danger btn-xs"> 
   <i class="fa fa-trash"></i> 
   删除 
  </button> 
 </td> 
</tr> 

图片 1

其指令含义为:遍历book_list对象,将成分赋值给book,索引赋值给key,何况动用要素渲染该tr标签
js仿Metronic高级表格,Vue自定义指令实现checkbox全选功能的方法_vue。值得注意的是:
① 应该使用v-text来安装文本值,那样不会冒出闪烁难点。
② Vue2.0中,不协理隐式的$index,须求显式声明,例如上述代码中”(book, keyState of Qatarin book_list”,key能够视作$index
多少渲染完了,不过看效果会知晓,价格、更新时间需求做一些格式调治。
Vue1.0中对此价格的调解可以接受

{{book.price | currency}} 

也正是过滤器,但在Vue2.0中,已丢弃私下认可过滤器了,那表示大家要求自定义过滤器,並且注册到Vue对象中去。
轻易写出currencydate过滤器为:

Vue.filter('date', function (timestamp) { 
 let date = new Date(timestamp*1000); 
 let y = date.getFullYear(); 
 let month = date.getMonth()+1; 
 let d = date.getDate(); 
 let h = date.getHours(); 
 let m = date.getMinutes(); 
 let s = date.getSeconds(); 
 return y + '年'+ 
   (month < 10 ? '0':'') + month + '月' + 
   (d < 10 ? '0':'') + d + '日' + 
   (h < 10 ? '0':'') + h + ':' + 
   (m < 10 ? '0':'') + m + ':' + 
   (s < 10 ? '0':'') + s; 
}); 
Vue.filter('currency', function(money, unit, fixed){ 
 if (isNaN(money)) {return "";} 
 if (typeof fixed == 'undefined' || isNaN(fixed)) { 
  fixed = 2 
 } 
 if (typeof unit =='undefined') { 
  unit = '¥ '; 
 } 
 let num = parseFloat(money); 
 return unit + num.toFixed(fixed); 
}); 

重复改过tr模板为:

<td>{{book.price | currency}}</td> 
<td>{{book.time | date}}</td> 

值得注意的是:过滤器不能够和v-text指令协作使用,下述代码不恐怕生效:

<td v-text="book.price | currency"></td> 
<td v-text="book.time | date"></td> 

纠正后的报表效果如下:

图片 2

分页呈现

分页其实就是只呈现原始数据中,索引值在某一个范围内的数码,能够领略为是一种多少的过滤管理.
借使知道了页容积,当前页码,原始数据集,就能够揣测出脚下页要显示怎么数据。
页码从1起头,那么第N页的多寡,他的目录(从0开头卡塔尔(قطر‎范围应该是:(N – 1State of Qatar*SIZE
~ N*SIZE – 1
是因为”分页”这一动作具有广泛性,大家今日methods中定义一个pageData方法:

methods: { 
 pageData: function (data, page_size, page_num) { 
  if (!(data instanceof Array)) {return [];} 
  let start = (page_num - 1)*page_size; 
  return data.slice(start, start + page_size); 
 } 
} 

值得注意的是:slice办法重返的是数组的原始成分,并非数组的备份(copy)。
“当前页的数据” 大家使用总结属性来成功,而不是艺术:

computed : { 
 page_book_list: function() { 
  return this.pageData(this.book_list, this.page_size, this.page_num); 
 } 
} 

值得注意的是:这里没什么值得好注意的。page_size、page_num是在data中定义的。
此刻表格的数目集就得换到page_book_list了
<tr v-for=”(book, key) in
page_book_list”> 

页码

要渲染页码列表,必得先拿走总页数,因为前期或许会增加种点字过滤,所以大家选取总括属性来获得总页数:
不足一页也要当一页来浮现

computed : { 
 total_page: function () { 
  let len = this.book_list.length; 
  let ret = parseInt(len/this.page_size); 
  if ((len % this.page_size) != 0) { 
   ret++; 
  } 
  return ret < 1 ? 1 : ret;; 
 } 
} 

页码列表的渲染使用v-for就能够,参照bootstrap的页码html,简单写出:

<ul class="pagination"> 
 <li :class="{disabled:page_num<=1}" @click="prePage()"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>«</i></a></li> 
 <li v-for="n in total_page" :class="{active:page_num==n}"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-text="n" @click="page_num=n"></a></li> 
 <li :class="{disabled:page_num >= total_page}" @click="nextPage()"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>»</i></a> 
 </li> 
</ul> 

值得注意的是:

@click是绑定click事件,能够是函数推行,也但是是js代码施行
:class是绑定class属性,格式是”样式名称:
条件”,当法规为true时,才设置那一个样式。
此间为何实际不是v-show?因为效果与利益太掉价了

自定义页体积

那就异常粗略了,将页码下拉框改换一下就能够,简单写出:

<select class="form-control" v-model="page_size"> 
 <option 
  v-for = "size in [5,10,15,20]" 
  :value = "size" 
  v-text = "size+'条'"> 
 </option> 
</select> 

:value是绑定value的值
v-model会使得select的value与page_size绑定,这一个绑定双向的

这里会晤世叁个小bug,即在切换页体量的时候,会造成总页数变化,有超大可能总页数会小于当前页。
于是在获得总页数的时候需求对当前页做一些改观:

total_page: function () { 
 let len = this.book_list.length; 
 let ret = parseInt(len/this.page_size); 
 if ((len % this.page_size) != 0) { 
  ret++; 
 } 
 if (this.page_num > ret) { 
  this.page_num = ret; 
 } else if (this.page_num < 1) { 
  this.page_num = 1; 
 } 
 return ret < 1 ? 1 : ret;; 
} 

本次效果图:

图片 3

上述正是本文的全体内容,希望对我们的学习抱有利于,也盼望大家多多关照帮客之家。

上篇使用Vue.js制作仿Metronic高档表格(一)静态设计介绍了急需、原型设计以至静态页面…

上代码:

       全选    {{item.demo}}    customerResult: {{customerResult}}     var vm = new Vue({ el: "#app", data:function(){ return { list:[{demo:1}, {demo:2}, {demo:3}], allCheck:'', customerResult:'', } }, directives: { 'check-all': { twoWay: true, params: ['checkData','result','key'], bind() { /*&#20026;&#21407;&#22987;&#25968;&#25454;&#30340;&#27599;&#19968;&#20010;&#23545;&#35937;&#28155;&#21152;&#19968;&#20010;checked&#23646;&#24615;*/ this.vm[this.params.checkData].forEach=&gt;{ Vue.set }); /*&#25552;&#21462;&#34987;&#36873;&#20013;&#30340;&#39033;*/ this.setValue=function(){ let result=[] this.vm[this.params.checkData].forEach =&gt; { if{ result.push(item[this.params.key]) } }); this.vm[this.params.result]=result } /*&#22914;&#26524;&#25152;&#26377;&#30340;&#21015;&#34920;&#30340;checked&#23646;&#24615;&#37117;&#20026;true,&#21017;&#36873;&#20013;&#20840;&#36873;&#26694;,&#21542;&#21017;&#19981;&#36873;&#20013;&#20840;&#36873;&#26694; */ this.vm.$watch(this.params.checkData,  =&gt; { if =&gt; item.checked)) { this.set; } else { this.set; } this.setValue; }, // checkAll&#21457;&#29983;&#26356;&#25913;&#26102; update { /*&#22914;&#26524;&#20840;&#36873;&#26694;&#34987;&#36873;&#20013;,&#21017;&#23558;&#21015;&#34920;&#30340;&#25152;&#26377;checked&#23646;&#24615;&#36716;&#20026;true,&#21542;&#21017;&#36716;&#20026;false */ if { this.vm[this.params.checkData].forEach =&gt; { item.checked = true; }); } else { this.vm[this.params.checkData].forEach =&gt; { item.checked = false; }); } this.setValue  

平铺直叙大家都要博得原始数据中的有些键值,可在“key”中填进想要获取的键值,“result”就是被选中的项了。
一时,我们要求再次来到一个完整的目的改善一下代码,当不输入key时,再次回到三个完好的靶子数组

this.setValue=()=>{ let result=[] this.vm[this.params.checkData].forEach => { //删除checked属性 let temp={}; =>delete Object.assign; item.checked?result.push(item[this.params.key]||temp):""; }); this.vm[this.params.result]=result}

但时,这个时候,重返来的数组中指标中并从未与与原数据是大同小异的援用地址,当须求动用array.$remove(卡塔尔函数时就能够退步,新扩大二个relative参数,客商自定义剖断再次回到的多寡是否与原本数据涉嫌

this.setValue = () => { let result = [] this.vm[this.params.checkData].forEach => { if { item.checked ? result.push : ""; }else{ //删除checked属性 let temp = {};  => delete Object.assign(); item.checked ? result.push(item[this.params.key] || temp) : ""; } }); this.vm[this.params.result] = result}

当数码长度超过2个时,要求看清2N次,优秀消耗质量,优化一下:

'check-all', { twoWay: true, params: ['checkData', 'result', 'key','relative'], /*checkData:列表数据, result:返回的结果, key:列表数据中需要返回的字段, relative:是否返回与列表数据相同引用地址的选中结果*/ bind() { /*提取被选中的项*/ this.setValue = () => { let result = [] if  { this.vm[this.params.checkData].forEach => { item.checked ? result.push; } else { this.vm[this.params.checkData].forEach => { //删除checked属性 let temp = {};  => delete Object.assign(); item.checked ? result.push(item[this.params.key] || temp) : ""; }); } this.vm[this.params.result] = result }; /*为原始数据的每一个对象添加一个checked属性*/ this.addChecked = () => { this.vm[this.params.checkData].forEach => { Vue.set(item, 'checked', false) }); }; /*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */ this.vm.$watch(this.params.checkData,  => { if return; data.every => item.checked) ? this.set : this.set; this.setValue; //当列表发生变化时重新绑定 this.vm.$watch(this.params.checkData,  => { if return this.addChecked; }, // checkAll发生更改时 update { /*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */ checkAll ? this.vm[this.params.checkData].forEach => { item.checked = true }) : this.vm[this.params.checkData].forEach => { item.checked = false }); this.setValue() }, }

此刻只须要看清N+1次。

以上那篇Vue自定义指令达成checkbox全选功效的法子正是小编分享给我们的全部内容了,希望能给大家三个参阅,也可望大家多多指教脚本之家。

发表评论

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