1.弹窗分页查询组件UI展示:

弹窗查询.png

2.组件调用

html代码：

                        <alerttable
                                           //弹窗选中的返回值
                                           :getvalue.sync="getvalue"
                                           //分页查询字段
                                           :listQuery="listQuery1"
                                            //弹窗下拉框选项
                                           :optionselecet="optionselecet1"
                                           //弹窗配置 如弹窗title，弹窗的显示隐dialogFormVisible
                                           :tableoption="option1"
                                           //分页数据，一般通过ajax
                                           :ajaxfuction="propajax1"
                                           //表格表头数据
                                           :alerttableheader="tableHeaderData1">
                         </alerttable>

js代码：

//数据定义
data() {
    return {
        getvalue： {}，

        optionselecet1: [{
            label: '料号描述',
            prop: 'description'
        }],

        option1: {
            title: "料号描述查询",
            value: '',
            dialogFormVisible: false
        },

        tableHeaderData1: [{
            label: '料号描述',
            prop: 'description'
        },
        {
            label: '料号',
            prop: 'partNumber',
        },
        ],

        listQuery1: {
            description: ' '
        },
    }

}
//在vue methods定义ajax方法
methods: {
    propajax(arg, ...rest) {
        return new Promise((resolve, reject) = >{
            getPerPeople(arg).then(response = >{
                resolve({
                    data: response.data.list,
                    total: response.data.total
                })
            })
        })
    },
}
  //在vue watch里面来监听数据变化
watch: {
    'option1.dialogFormVisible' (newvalue, oldvalue) {}

},