效果描述：点击输入框弹出table面板，面板包括标题、列表分页、检索条件、确定取消安钮、单选全选框。面板回显已选中条目，切换页时仍能显示。
思路：组件中包括面板整体样式、标题 、按钮、分页组件；页面中将搜索条件、th、tr用slot传入组件模板中，形成每页的table。监听面板打开关闭的变量进行重新渲染，点击确定时页面父组件监听事件传出选中条目的数组，符合条件则执行面板关闭及后续。点击检索按钮时通过this.$refs.comName.method(‘tag’);调用组件内检索方法、改变组件内检索条件。
技能点：主要为slot使用方法以及业务梳理，合理提取组件。外表及方法共用，仅传入url和检索条件，确定时传出选定数组。若为多个table且表头不同，则在一个父组件内通过变量控制显示与数组赋值。slot用v-if控制显示（不可v-show，此属性为控制dom元素display属性），不可出现同名slot，但slot内可用template显示不同的html内容。 slot-scope=" " 为vue2.5+中写法。
<table class="table table-hover table-bordered">
<tbody>
<slot name="ths"></slot>
<slot name="item"
v-for="item in items"
:item="item">
</slot>
</tbody>
</table>
<tr slot="ths">
<th>ID</th>
<th>Project</th>
<th>Version</th>
</tr>
html中的组件外框公共模板
<script type="text/template" id="table-wrapper">
<!--弹出面板-->
<div class="modal fade" tabindex="-1" style="z-index:99999;" id="modal-table">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" aria-hidden="true" @click="closeAssocModal">
<span class="white">×</span>
</button>
{{title}}
</div>
</div>
<div class="modal-body no-padding"style="min-height:445px">
<div class="staff-search">
<slot name="search-condition"></slot>
</div>
<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
<thead>
<slot name="ths"></slot>
</thead>
<tbody>
<tr v-for="(item,index) in items"
:item="item" :class="{ isSelected: item.isSelected }" @click="pushItem(item,index)">
<slot name="item" :item="item"></slot>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer no-margin-top">
<button class="btn btn-sm btn-danger pull-left" @click="closeAssocModal">
<i class="ace-icon fa fa-times"></i>
关闭
</button>
<button class="btn btn-sm btn-success pull-left" @click="addItems()">
<i class="ace-icon fa fa-times"></i>
确认
</button>
<ul class="pagination pull-right no-margin">
<navigation :pages="employeePages" :current.sync="employeePageNo" @navpage="employeePageList" ref="associNavigation"></navigation>
</ul>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<loading class="associationLayer" v-show="associationLayer"></loading>
</div>
</script>
页面内代码
<template>
<ttable-wrapper :title="'企业检索'" @add-items="confirmAssociation" @close-asso-modal="closeAssoModal" ref="association" :if-add-employee="ifAddAssociateItems" :selected-items="selectedAssoItems" :url="''">
<template slot="search-condition">
<div class="form-group col-sm-10">
<label class="col-sm-4 control-label no-padding-right">企业名称：</label>
<div class="col-sm-8">
<input type="text" autocomplete="off" maxlength="20" class="col-sm-9" v-model="enterName" @keyup.enter="getEnterList()">
<button @click="getEnterList()" class="btn btn-primary col-sm-2 tbl-search"><i class="ace-icon fa fa-search"></i></button>
</div>
</div>
</template>
<template slot="ths">
<tr>
<th class="center" >
<label class="position-relative">
<input type="checkbox" class="ace association-check-all" @click="checkedAllAssoc">
<span class="lbl"></span>
</label>
</th>
<th>企业名称</th>
<th>负责人</th>
<th>联系方式</th>
</tr>
</template>
<template slot="item" scope="scope">
<td class="td-center" style="cursor: pointer;"><label class="position-relative"><input type="checkbox" class="ace" :checked="scope.item.isSelected"> <span class="lbl"></span></label></td>
<td>
{{scope.item.name}}
</td>
<td>
{{scope.item.leader}}
</td>
<td>
{{scope.item.telephone}}
</td>
</template>
</table-wrapper>
</template>
组件封装
Vue.component("table-wrapper",{
data:function(){
return {
employeePageNo:1, //当前页
employeePages:0, //总共页数
employPageSize:10,
senddata:{},
items:[], //table列表数据
associationLayer:false,//loading标志
tempSelectedItems:[], //组件内确定时外传数据
};
},
props:["title","ifAddEmployee","url","selectedItems"],//面板标题、监听打开面板、地址、数据、选中项
template:'#table-wrapper',
methods:{
//点击分页页码
employeePageList:function(curPage) {
if(curPage){
this.employeePageNo = curPage;
this.getEmployeeList();
}
},
//点击确定按钮 添加
addItems:function(){
this.$emit("add-items",this.tempSelectedItems);
},
//点击关闭按钮时
closeAssocModal:function(){
this.$emit("close-asso-modal");// 替换data-dismiss="modal"
},
//获取table列表
getEmployeeList:function(tag){
var This = this;
var url = This.url;
var data = This.senddata;
if(tag){
data.pageNum = 1;
This.employeePageNo = 1;
}else{
data.pageNum = This.employeePageNo;
}
data.pageSize = This.employPageSize;
ajax('post',url,data,function(response){
This.associationLayer = false;//关闭等待框
if(response.code==1){
var list = response.data.records||response.data;
if(list.length>0){
$.each(list,function (index,item) {//选中数组渲染与回显
item.isSelected = false;
$.each(This.tempSelectedItems,function(eindex,dispatchItem){
if(item.id==dispatchItem.id){
item.isSelected = true;
}
});
});
This.items = list;
This.employeePages = response.data.pages || Math.ceil(response.data.totalCount/This.employPageSize) ||Math.ceil(response.totalCount/This.employPageSize);
}else{
var msg = "未检索到相关内容";
errorMsgTip(msg);
}
}
});
if(tag){
var pageNum = data.current||data.pageNum;
this.$refs.associNavigation.goPage(pageNum);//分页组件首页点击效果
}
$(".association-check-all").prop("checked", false);
},
//面板中选择 新增或删除
pushItem:function(item,index){
/*添加删除*/
event.preventDefault();
item.isSelected = !item.isSelected;
var This = this;
if(item.isSelected){
This.tempSelectedItems.push(item);
}else{
var items = This.tempSelectedItems;
for(var i=items.length-1;i>=0;i--){
if(item.id === items[i].id){ //索引值为选中数组中的索引值
This.tempSelectedItems.splice(i,1);
}
}
}
},
//全选 页面传递全选标志
checkedAllAssoc:function(event){
var ifChecked = event.target.checked;
var This = this;
if(ifChecked){
$.each(This.items,function (index,item) {
item.isSelected = true;//显示
var flag = false;
$.each(This.tempSelectedItems,function(indexSelected,itemSelected){
if(itemSelected.id == item.id){
flag = true;//已选定数组中已存在
return false;
}
});
if(!flag){//未存在则存入
This.tempSelectedItems.push(item);
}
});
}else{
$.each(this.items,function (index,item) {
item.isSelected = false;
$.each(This.tempSelectedItems,function(indexSelected,itemSelected){
if(itemSelected.id == item.id){
This.tempSelectedItems.splice(i,1);
return false;
}
});
});
}
}
},
watch: {
ifAddEmployee:function(curVal,oldVal){
if(curVal){
var This = this;
this.senddata = {};
this.getEmployeeList('search');//初始搜索 条件空、页码1
this.associationLayer = true;
this.tempSelectedItems = [];
$.each(this.selectedItems,function(index,item){
This.tempSelectedItems.push(item);
});
}
}
}
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
