combox 动态加载筛选数据，筛选是表格三列内容模糊搜索

input中输入文字 动态获取后端数据加载到popover表格中

const comboxGridTemp = `<el-popover

placement="bottom"

width="450"

v-model="visible"

trigger="focus"

:visible-arrow="false"

>

<el-table 

:data="tableData"

highlight-current-row

@current-change="handleCurrentChangeData"

style="width: 100%">

<el-table-column

  :label="item.title"

  :prop="item.field" :label-width="item.width"

 v-for="item in columns" :key="item.id" 

 v-if="item.field"

  >

</el-table-column>

</el-table>

<el-pagination 

@current-change="handleCurrentChange"

:current-page.sync="queryParams.pageNum"

:page-size="10"

layout="total, prev, pager, next"

:total="total">

</el-pagination>

<el-input slot="reference" @focus="getData()" v-model="queryParams.keyword" @keyup.native="getData"></el-input>

</el-popover>`

Vue.component("comboxGrid", {

    props: [

        // 下拉表格各列的定义,如[{field:"code",title:"编号",width:100},...]

        'columns',

        // 输入框是否显示清除按钮,默认为true

        'justShowData'

    ],

    data() {

        return {

            queryParams: {

                pageNum: 1,

                pageSize: 10,

                keyword: ''

            },

            tableData: [],

            total: 0,

            timer: '',

            keyword:'',

            visible:false

        }

    },

    mounted() {

        this.$nextTick(() => {

//需默认加载，不默认获取数据，挂载组件是组件标签上的监听方法会报错

            this.getData("default");

        });

    },

    watch: {

        justShowData(val) {

            this.queryParams.keyword = val;

        }

    }

    ,

    methods: {

        getData(a) {

//这个定时器用来解决用户连续输入（键盘事件）不执行方法

            clearTimeout(this.timer);

            this.timer = setTimeout(async () => {   

                

                if(a!='default'){

                    this.visible =true;

                }               

                this.$emit('select-data',this.queryParams.keyword); 

                let str = '';

                if (this.columns[0].name) {

                    str =this.columns[0].str ;

                }

                if (!str) return

                const { data: res } = await this.$http.get(str, { params: this.queryParams });

                if (res.code != '00000') return this.$message.error(res.message);   

                this.tableData = res.rows;

                this.total = res.total;

                clearTimeout(this.timer);

            }, 1000);

        },

        handleCurrentChange(val) {

            this.queryParams.pageNum = val;

            this.getData("noDefault");

        },

        /*选中的一条*/

        handleCurrentChangeData(val) {

            this.$emit('select-data',val);

            this.visible = false;   

        }

    },

    template: comboxGridTemp

});

 

//下面是父级调用子组件

//只有当focus时才调用组件

  <el-input @focus="focusedComponent =true" v-if="!focusedComponent"></el-input>

                <combox-grid v-if="focusedComponent"

                  :columns="subjects_columns_componention"

                  :justShowData="justShowDataComponent"

                  @select-data="showComponent"

                ></combox-grid>

 

data(){

retrun {

     subjects_columns_componention:[

{ 

//我这里是加载表格有三列，这个数组有4个元素，第一个我给的接口地址

 {

          name: "dddd",

          str: "接口地址",

        },

        {

          field: "id",

          title: "代号",

          width: 100,

        },

        {

          field: "name",

          title: "名称",

          width: 200,

        },

        {

          field: "quickCode",

          title: "快捷码",

          width: 100,

        },

}

]

}

}

 

methods:{

showComponent(val){

  if (val) {

        this.justShowDataComponent = val;

        if (val.id) {

          this.addForm.component = val.id;

          this.justShowDataComponent = val.id + "^" + val.name;

        }

      }

}

}