Vue扩展下拉表格组件：el-combo-grid

Posted 2023-03-29

参考技术A 组件文件：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()returnvisible: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'

  ]