删除和查询的操作的封装

多选删除

//多选删除
	data(){
		return{ deleteApi:...}
	}
    someDeleteHandler() {
      const data = this.$refs.multipleTable.selection
      if (data.length >= this.tableData.length && this.page > 1) {
        this.page--
      }
      const ids = []
      data.forEach(element => {
        ids.push(element.id)
      });
      this.willDelete(ids)
    },
    //确认删除提示
    willDelete(ids) {
      this.$confirm('你确定删除选中的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const dataInfo = await this.deleteApi(ids)
        this.success_or_faild(dataInfo)
        this.refresh()
      }).catch(() => {
        
      })
    },
    

单个删除

//单个删除
    singleDeleteHandler(id) {
      this.$confirm('你确定删除该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.tableData.length <= 1&&this.page>1) {
          this.page--
        }
        const dataInfo = await this.deleteApi({'id':id})
        this.success_or_faild(dataInfo)
        this.refresh()
      }).catch(() => {
        
      })
    },

查询操作

查询操作的封装比较简单，只需要掉分页接口，把查询条件传入即可

data(){
	serachInfo:{....}
}
queryHandler(){
	this.getTableData();	
}
getParams(){
	return{
		page:this.page,
		pageSize:this.pageSize,
		...this.searchInfo
	}
}
 async getTableData(page = this.page, pageSize = this.pageSize) {
      console.log(page,pageSize)
      const table = await this.listApi({ page, pageSize, ...this.searchInfo })
      if (table.code === 0) {
        this.tableData = table.data.list||table.data.record||table.data
        this.total = table.data.total
        this.page = table.data.page
        this.pageSize = table.data.pageSize
      }
    },