组件文件：el-combo-grid.vue
<template>
<div > <el-input :value="value" @input="changeValue" @focus="onfocus" @blur="onblur" ref="inputValue"> <div class="el-picker-panel" :style="pStyle" v-show="visible" ref="elcombogrid"> <div class="table-container"> <el-table v-loading="listLoading" :data="list" @row-click="rowClick" stripe size="mini" element-loading-text="Loading" fit border highlight-current-row> <el-table-column v-if="showIndex" label="序号" type="index" align="center" width="50"> <el-table-column v-for="itemin columns" :type="item.type" :key="item.key" :label="item.label" :prop="item.key" :align="item.align" :width="item.width" :header-align="item.headerAlign"> <template slot-scope="scope"> <span>{{ scope.row[item.key] }} <cus-pagination v-show="pagination" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/></div></div></div></template>
<script>import requestfrom '@/utils/request'; export default {name:"el-combo-grid", props:{value:{type:String}, requestUrl:{type:String}, columns:{type:Array}, panelStyle:{type:String}, itemValue:{type:String}, showIndex:{type:Boolean}, pagination:{type:Boolean}}, data(){return{visible:false, pStyle:'width:500px', list:[], total:0, listLoading:true, listQuery: {page:1, limit:5, keyword:null }, keyword:'' }}, mounted() {if(this.visible){// document.addEventListener('click',function (e) {// if(this.$refs.elcombogrid.name!=e.target.prototype.name){// this.visible = false;// }// }) }}, methods:{changeValue(val){this.$emit('input',val)//向上级传送数据 this.keyword = valthis.getList()}, onfocus(el){this.pStyle =this.panelStyle+';position:absolute;z-index:999999' this.visible =true this.keyword = el.target.value this.getList()}, onblur(el){// if(this.visible && !this.isopen) {// this.visible = false// this.isopen = false// } }, getList(){if(this.pagination){this.listQuery.keyword=this.keyword }else {if(this.keyword){this.listQuery ={keyword:this.keyword }}else {this.listLoading =false return //如果不分页，无keyword不查询数据（避免大数据量） }}this.listLoading =true; this.queryTableData(this.listQuery).then(response => {this.list = response.data.list; this.total = response.data.total; this.listLoading =false; })}, queryTableData(query){return request({url:this.requestUrl, method:'post', data: query}); }, rowClick:function(row, column, event){this.$emit('row-select-event',row, column, event)this.$emit('input',row[this.itemValue])this.visible =false }}}</script>
使用实例：
<el-combo-grid v-model="form.studentName"
:requestUrl="'/api/edu/student/listPage'"
:pagination="true" //如果=true，requestUrl必须是分页插件，false直接返回data.list
:columns="students_columns"// 下拉表格的列表
:show-index="true" //下拉表格是否显示序号列
:item-value="'name'"//当前控件取值的列名
:panel-style="'width:550px'"//下拉面板的宽度
@row-select-event="studentSelect"//下拉表格选择事件
>
</el-combo-grid>
定义在data中的下拉表格的列表
students_columns: [
{
label:'编号',
key:'code',
width:180,
align:'left',
headerAlign:'center'
},
{
label:'名称',
key:'name',
width:100,
align:'left',
headerAlign:'center'
},
{
label:'联系人名',
key:'linkName',
width:100,
align:'left',
headerAlign:'center'
},
{
label:'联系电话',
key:'linkPhone',
align:'left',
headerAlign:'center'
}]
