This commit is contained in:
sc
parent
4b1ba9d393
commit
907481c462
|
|
@ -8,34 +8,21 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-table-select">
|
||||
<el-popover ref="popover" v-model:visible="visible" :width="500" placement="bottom-start">
|
||||
<template #reference>
|
||||
<div>
|
||||
<el-input ref="input" placeholder="请选择" readonly :class="{ 'is-focus': visible }">
|
||||
<template #suffix>
|
||||
<i :class="['el-select__caret', 'el-input__icon', 'el-icon-arrow-up', visible?'is-reverse':'' ]"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
<div ref="tags" class="sc-table-select__tags" :style="{ 'padding-right': '32px', width: '100%' }">
|
||||
<el-tag v-for="(tag,index) in tags" :key="tag.value" type="info" size="mini" closable @close="deleteTag(index)">{{tag.label}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:300px">
|
||||
<el-table :data="tableData" :height="260" stripe @selection-change="selectionChange">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="50"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
|
||||
<el-select ref="select" v-model="defaultValue" clearable multiple filterable placeholder="请选择" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
|
||||
<template #empty>
|
||||
<div class="sc-table-select__table" style="width: 500px;" v-loading="loading">
|
||||
<el-table ref="table" :data="tableData" :height="245" stripe @select="select" @select-all="selectAll">
|
||||
<el-table-column type="selection" width="45"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" width="150"></el-table-column>
|
||||
<el-table-column prop="user" label="姓名"></el-table-column>
|
||||
</el-table>
|
||||
<div class="sc-table-select__page">
|
||||
<el-pagination small background layout="prev, pager, next" :total="500"></el-pagination>
|
||||
<el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -46,88 +33,134 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{
|
||||
value: '1',
|
||||
label: '黄金糕'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '双皮奶'
|
||||
loading: false,
|
||||
keyword: null,
|
||||
defaultValue: [],
|
||||
tableData: [],
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
props: {
|
||||
label: 'user',
|
||||
value: 'id'
|
||||
}
|
||||
],
|
||||
visible: false,
|
||||
tableData: [{
|
||||
id: '10',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
id: '11',
|
||||
name: '张小帅',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
id: '12',
|
||||
name: '刘先发',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
id: '13',
|
||||
name: '张三',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
tags: {
|
||||
handler(){
|
||||
console.log("1");
|
||||
this.setInputHeight()
|
||||
computed: {
|
||||
|
||||
},
|
||||
deep: true
|
||||
watch: {
|
||||
modelValue(){
|
||||
this.defaultValue = this.modelValue
|
||||
this.autoCurrentLabel()
|
||||
},
|
||||
defaultValue(){
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setInputHeight()
|
||||
this.defaultValue = this.modelValue
|
||||
this.autoCurrentLabel()
|
||||
},
|
||||
methods: {
|
||||
setInputHeight(){
|
||||
//表格显示隐藏回调
|
||||
visibleChange(visible){
|
||||
if(visible){
|
||||
this.currentPage = 1
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
//获取表格数据
|
||||
async getData(){
|
||||
this.loading = true;
|
||||
var reqData = {
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword
|
||||
}
|
||||
var res = await this.$API.log.list.get(reqData);
|
||||
this.tableData = res.data;
|
||||
this.total = res.count;
|
||||
this.loading = false;
|
||||
//表格默认赋值
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.input.style.height = this.$refs.tags.clientHeight + 6 + 'px'
|
||||
this.defaultValue.forEach(row => {
|
||||
var setrow = this.tableData.filter(item => item[this.props.value]===row[this.props.value] )
|
||||
if(setrow.length > 0){
|
||||
this.$refs.table.toggleRowSelection(setrow[0], true);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
deleteTag(index){
|
||||
this.tags.splice(index, 1);
|
||||
//分页刷新表格
|
||||
reload(){
|
||||
this.getData()
|
||||
},
|
||||
selectionChange(selection){
|
||||
selection.forEach(item => {
|
||||
this.tags.push({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
//自动模拟options赋值
|
||||
autoCurrentLabel(){
|
||||
this.$nextTick(() => {
|
||||
this.$refs.select.selected.forEach(item => {
|
||||
item.currentLabel = item.value[this.props.label]
|
||||
})
|
||||
})
|
||||
},
|
||||
//表格勾选事件
|
||||
select(rows, row){
|
||||
var isSelect = rows.length && rows.indexOf(row) !== -1
|
||||
if(isSelect){
|
||||
this.defaultValue.push(row)
|
||||
}else{
|
||||
this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.props.value] == row[this.props.value]), 1)
|
||||
}
|
||||
this.autoCurrentLabel()
|
||||
},
|
||||
//表格全选事件
|
||||
selectAll(rows){
|
||||
var isAllSelect = rows.length > 0
|
||||
if(isAllSelect){
|
||||
rows.forEach(row => {
|
||||
var isHas = this.defaultValue.find(item => item[this.props.value] == row[this.props.value])
|
||||
if(!isHas){
|
||||
this.defaultValue.push(row)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.tableData.forEach(row => {
|
||||
var isHas = this.defaultValue.find(item => item[this.props.value] == row[this.props.value])
|
||||
if(isHas){
|
||||
this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.props.value] == row[this.props.value]), 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.autoCurrentLabel()
|
||||
},
|
||||
//tags删除后回调
|
||||
removeTag(tag){
|
||||
var row = this.findRowByKey(tag[this.props.value])
|
||||
this.$refs.table.toggleRowSelection(row, false);
|
||||
},
|
||||
//清空后的回调
|
||||
clear(){
|
||||
//this.$emit('update:modelValue', this.defaultValue);
|
||||
},
|
||||
// 关键值查询表格数据行
|
||||
findRowByKey (value) {
|
||||
return this.tableData.find(item => item[this.props.value] === value)
|
||||
},
|
||||
filterMethod(keyword){
|
||||
if(!keyword){
|
||||
this.keyword = null;
|
||||
return false;
|
||||
}
|
||||
this.keyword = keyword;
|
||||
this.getData()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</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 .el-input .el-select__caret {color: #C0C4CC;
|
||||
font-size: 14px;
|
||||
transition: transform .3s;
|
||||
transform: rotateZ(180deg);
|
||||
cursor: pointer;}
|
||||
.sc-table-select .el-input .el-select__caret.is-reverse {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
.sc-table-select__table {padding:12px;}
|
||||
.sc-table-select__page {padding-top: 12px;}
|
||||
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,16 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
value: [
|
||||
{
|
||||
id: "10",
|
||||
user: "王小虎"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
user: "曹操"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue