弹窗分页查询组件

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

弹窗查询.png

2.组件调用

html代码：

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) {}

},