hide el-selector-tags

This commit is contained in:
Peter Olu 2022-05-27 11:47:04 +01:00
parent 89a9fea3f1
commit bee83fecf7

View File

@ -17,12 +17,13 @@ limitations under the License. -->
<div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5"> <div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
<p style="margin-right: 10px">Select visible columns</p> <p style="margin-right: 10px">Select visible columns</p>
<el-select <el-select
id="columnSelector"
v-model="selectedColumns" v-model="selectedColumns"
multiple multiple
collapse-tags
placeholder="Select" placeholder="Select"
style="width: 240px" style="width: 240px"
size="small" size="small"
@change="hideTags"
> >
<el-option <el-option
v-for="item in logStore.serviceLogColumn" v-for="item in logStore.serviceLogColumn"
@ -381,15 +382,16 @@ function hideColumns(column: any) {
selectedColumns.value.push(column.value); selectedColumns.value.push(column.value);
logStore.hideColumns(selectedColumns.value); logStore.hideColumns(selectedColumns.value);
selectedColumns.value = []; selectedColumns.value = [];
// toggleColumSelector(); }
// setSearchTerm(""); function hideTags() {
let tagsWrap = document.querySelector(".el-select__tags");
if (!tagsWrap) return;
tagsWrap.style.display = "none";
} }
function showColumns(column: any) { function showColumns(column: any) {
selectedColumns.value.push(column.value); selectedColumns.value.push(column.value);
logStore.showColumns(selectedColumns.value); logStore.showColumns(selectedColumns.value);
selectedColumns.value = []; selectedColumns.value = [];
// toggleColumSelector();
// setSearchTerm("");
} }
async function init() { async function init() {
const resp = await logStore.getLogsByKeywords(); const resp = await logStore.getLogsByKeywords();
@ -723,7 +725,7 @@ watch(
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background: transparent; background: transparent;
} }
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
width: 100%; width: 100%;
padding: 0 32px 0 20px; padding: 0 32px 0 20px;
} }
@ -732,7 +734,4 @@ watch(
width: 100%; width: 100%;
padding: 0 32px 0 20px; padding: 0 32px 0 20px;
} }
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
display:none !important;
}
</style> </style>