|
|
@@ -1,137 +0,0 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<vxe-pulldown ref="pulldownRef" popup-class-name="my-dropdown4" transfer> |
|
|
|
<template #default> |
|
|
|
<vxe-input |
|
|
|
v-model="searchName" |
|
|
|
suffix-icon="vxe-icon-table" |
|
|
|
v-bind="inputProps" |
|
|
|
@keyup="keyupEvent" |
|
|
|
@focus="focusEvent" |
|
|
|
@suffix-click="suffixClick" |
|
|
|
></vxe-input> |
|
|
|
</template> |
|
|
|
<template #dropdown> |
|
|
|
<div class="my-bodydown4"> |
|
|
|
<vxe-grid |
|
|
|
ref="xGrid" |
|
|
|
:data="tableData" |
|
|
|
:pagerConfig="pagerConfig" |
|
|
|
@cell-click="cellClickEvent" |
|
|
|
@checkbox-change="onCheckBoxChange" |
|
|
|
@checkbox-all="onCheckBoxAll" |
|
|
|
@page-change="pageChangeEvent" |
|
|
|
v-bind="tableConfig" |
|
|
|
></vxe-grid> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</vxe-pulldown> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
props: { |
|
|
|
inputProps: { |
|
|
|
type: Object, |
|
|
|
default: () => ({ |
|
|
|
placeholder: '请选择' |
|
|
|
}) |
|
|
|
}, |
|
|
|
tableConfig: { |
|
|
|
type: Object, |
|
|
|
default: () => ({ |
|
|
|
}) |
|
|
|
}, |
|
|
|
apiMethod: { |
|
|
|
required: true, |
|
|
|
}, |
|
|
|
apiCallback: { |
|
|
|
required: false |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
searchName: "", |
|
|
|
pagerConfig: { |
|
|
|
pageSize: 10, |
|
|
|
pageSizes: [10, 20, 50, 100, 200], |
|
|
|
enabled: true |
|
|
|
}, |
|
|
|
tableData: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取表格数据 |
|
|
|
async getList() { |
|
|
|
if (this.apiMethod) { |
|
|
|
const res = await this.apiMethod() |
|
|
|
console.log('apiCallback=',this.apiCallback) |
|
|
|
// 如果有回调处理参数 |
|
|
|
if (this.apiCallback) { |
|
|
|
const newRes = this.apiCallback(res) |
|
|
|
this.tableData = newRes.list |
|
|
|
console.log('this.tableData', newRes) |
|
|
|
} else { |
|
|
|
// 如果没有回调处理参数,则走默认的 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// 复选 |
|
|
|
onCheckBoxChange(params) { |
|
|
|
console.log('复选了=', params) |
|
|
|
this.$emit('change',params) |
|
|
|
}, |
|
|
|
// 全选/全不选 |
|
|
|
onCheckBoxAll(params) { |
|
|
|
console.log('params=', params) |
|
|
|
this.$emit('changeAll',params) |
|
|
|
}, |
|
|
|
focusEvent() { |
|
|
|
const $pulldown = this.$refs.pulldownRef; |
|
|
|
if ($pulldown) { |
|
|
|
$pulldown.showPanel(); |
|
|
|
} |
|
|
|
}, |
|
|
|
keyupEvent() { |
|
|
|
}, |
|
|
|
suffixClick() { |
|
|
|
const $pulldown = this.$refs.pulldownRef; |
|
|
|
if ($pulldown) { |
|
|
|
$pulldown.togglePanel(); |
|
|
|
} |
|
|
|
}, |
|
|
|
cellClickEvent({ row }) { |
|
|
|
const $pulldown = this.$refs.pulldownRef; |
|
|
|
if ($pulldown) { |
|
|
|
this.searchName = row.name; |
|
|
|
$pulldown.hidePanel(); |
|
|
|
} |
|
|
|
}, |
|
|
|
pageChangeEvent({ currentPage, pageSize }) { |
|
|
|
this.pagerConfig.currentPage = currentPage; |
|
|
|
this.pagerConfig.pageSize = pageSize; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.my-dropdown4 { |
|
|
|
background-color: #fff; |
|
|
|
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1); |
|
|
|
.my-bodydown4 { |
|
|
|
width: 600px; |
|
|
|
height: 300px; |
|
|
|
} |
|
|
|
|
|
|
|
.my-footdown4 { |
|
|
|
border-top: 1px solid #e8eaec; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |