This commit is contained in:
sc
parent
0a1cc1a69b
commit
fc1210ff1f
|
|
@ -113,8 +113,8 @@ const api = {
|
|||
list: {
|
||||
url: `${config.MOCK_URL}/loglist`,
|
||||
name: "日志列表",
|
||||
get: async function(){
|
||||
return await http.get(this.url);
|
||||
get: async function(params){
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<!--
|
||||
* @Descripttion: 分页下拉组件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年6月10日10:04:07
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-table-select">
|
||||
<el-popover ref="popover" v-model:visible="visible" :width="500" placement="bottom-start">
|
||||
<template #reference>
|
||||
<div>
|
||||
<el-input placeholder="请选择" readonly :class="{ 'is-focus': visible }" >
|
||||
<template #suffix>
|
||||
<i class="el-input__icon el-icon-arrow-up"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="sc-table-select__tags">
|
||||
<el-tag type="info" size="mini" closable>超小标签</el-tag>
|
||||
<el-tag type="info" size="mini" closable>超小标签</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:300px">
|
||||
<el-table :data="tableData" :height="200">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
modelValue: null,
|
||||
mode: { type: String, default: "popover" },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$refs.popover);
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-table-select {position: relative;}
|
||||
|
||||
.sc-table-select .el-input.is-focus:deep(.el-input__inner) {border-color: #409eff;}
|
||||
|
||||
.sc-table-select__tags {position: absolute;z-index: 1;top: 50%;transform: translateY(-50%);}
|
||||
.sc-table-select__tags .el-tag {margin: 2px 0 2px 6px;border-color: transparent;background-color: #f0f2f5;}
|
||||
.sc-table-select__tags .el-tag:deep(.el-icon-close) {background-color: #c0c4cc;color: #fff;right: -7px;}
|
||||
.sc-table-select__tags .el-tag:deep(.el-icon-close):hover {background-color: #909399;}
|
||||
</style>
|
||||
|
|
@ -10,33 +10,26 @@
|
|||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never">
|
||||
<el-select ref="selectDom" v-model="value" value-key="value" placeholder="请选择" :loading="loading" multiple clearable @visible-change="visibleChange($event)">
|
||||
<div class="select-dropdown">
|
||||
<div class="select-dropdown-option">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination small background layout="pager" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
<sc-table-select v-model="value" style="width: 400px;">
|
||||
|
||||
</sc-table-select>
|
||||
<p>{{value}}</p>
|
||||
</el-card>
|
||||
<p>value:{{value}}</p>
|
||||
<p>currentPage:{{currentPage}}</p>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import scTableSelect from '@/components/scTableSelect';
|
||||
|
||||
export default {
|
||||
name: 'tableselect',
|
||||
components: {
|
||||
scTableSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
loading: false,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
options: [],
|
||||
value: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -46,37 +39,10 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
async getData(){
|
||||
this.loading = true;
|
||||
var reqData = {
|
||||
page: this.currentPage
|
||||
}
|
||||
var res = await this.$API.user.list.get(reqData);
|
||||
this.options = res.data;
|
||||
this.total = res.count;
|
||||
this.loading = false;
|
||||
},
|
||||
//选项打开或关闭时
|
||||
visibleChange(isopen){
|
||||
if(isopen){
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
//分页点击
|
||||
reload(){
|
||||
this.getData();
|
||||
},
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-dropdown-option {max-height:190px;overflow: auto;}
|
||||
.page {border-top: 1px solid #eee;padding: 6px 1px 0 1px;}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue