This commit is contained in:
sc
parent
0a1cc1a69b
commit
fc1210ff1f
|
|
@ -113,8 +113,8 @@ const api = {
|
||||||
list: {
|
list: {
|
||||||
url: `${config.MOCK_URL}/loglist`,
|
url: `${config.MOCK_URL}/loglist`,
|
||||||
name: "日志列表",
|
name: "日志列表",
|
||||||
get: async function(){
|
get: async function(params){
|
||||||
return await http.get(this.url);
|
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>
|
<template>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-card shadow="never">
|
<el-card shadow="never">
|
||||||
<el-select ref="selectDom" v-model="value" value-key="value" placeholder="请选择" :loading="loading" multiple clearable @visible-change="visibleChange($event)">
|
<sc-table-select v-model="value" style="width: 400px;">
|
||||||
<div class="select-dropdown">
|
|
||||||
<div class="select-dropdown-option">
|
</sc-table-select>
|
||||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
<p>{{value}}</p>
|
||||||
</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>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
<p>value:{{value}}</p>
|
|
||||||
<p>currentPage:{{currentPage}}</p>
|
|
||||||
</el-main>
|
</el-main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
import scTableSelect from '@/components/scTableSelect';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'tableselect',
|
name: 'tableselect',
|
||||||
|
components: {
|
||||||
|
scTableSelect
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: null,
|
value: null
|
||||||
loading: false,
|
|
||||||
pageSize: 20,
|
|
||||||
total: 0,
|
|
||||||
currentPage: 1,
|
|
||||||
options: [],
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -46,37 +39,10 @@
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.select-dropdown-option {max-height:190px;overflow: auto;}
|
|
||||||
.page {border-top: 1px solid #eee;padding: 6px 1px 0 1px;}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue