<template>
<
el-table
-column
v
-if="col
.show && col
.type != '
selection' && col
.type != 'radio'"
v
-bind="col"
:align="'center'"
showOverflowTooltip
>
<template #header>
<div class="table
-header
-div">
<span class="title
-span">{{ col
.lab
el }}</span>
<!
-- 控制筛选按钮显隐
-->
<template v
-if="col
.templet !== 'tool' && col
.filter && col
.prop">
<
el-popover
:visible="visible && col
.prop === showKey"
:virtual
-ref="refName"
placement="bottom"
:width="'fit
-content'"
>
<template #reference>
<!
-- 筛选icon
-->
<div class="filter
-container">
<
el-icon
@click
.stop="toggleNameFilter(col
.prop, col)"
size="17
.4"
:class="{ 'filter
-active': searchData[col
.prop] }"
>
<Filter />
</
el-icon>
</div>
</template>
<div>
<!
-- 输入
-->
<
el-input
v
-if="col
.filter
.filterFormType === 'input'"
v
-mod
el="searchData[col
.prop]"
:autofocus="true"
placeholder="请输入"
v
-bind="col
.attrs"
@input="applyNameFilter"
clearable
style="margin
-top: 10px; width: 150px"
/>
<!
--下拉 不需要获取数据
-->
<template v
-if="!col
.filter
.needGetList">
<
el-select
v
-if="col
.filter
.filterFormType === '
select'"
filterable
:reserve
-keyword="false"
v
-mod
el="searchData[col
.prop]"
v
-bind="col
.attrs"
@change="applyTagFilter"
clearable
style="margin
-top: 10px; width: 150px"
>
<
el-option
v
-for="item in col
.filter
.selectList"
:key="item"
:value="item
.value"
:lab
el="item
.name"
/>
</
el-select>
<Fk
SelectTree
v
-if="col
.filter
.filterFormType === '
select-tree'"
v
-mod
el="searchData[col
.prop]"
v
-bind="col
.attrs"
/>
</template>
<!
--下拉 需要搜索获取后端接口数据
-->
<template v
-if="col
.filter
.needGetList">
<Fk
Select
v
-if="col
.filter
.filterFormType === '
select'"
v
-bind="col
.attrs"
v
-mod
el="searchData[col
.prop]"
:sourceData="javaList"
></Fk
Select>
<!
-- 多选树下拉 需要搜索获取后端接口数据
-->
<Fk
SelectTree
v
-if="col
.filter
.filterFormType === '
select-tree'"
v
-mod
el="searchData[col
.prop]"
v
-bind="col
.attrs"
:data="javaList"
:sourceData="javaList"
></Fk
SelectTree>
</template>
<!
-- 日期 && 日期时间
-->
<
el-date
-picker
v
-if="
col
.filter
.filterFormType === 'daterange' ||
col
.filter
.filterFormType === 'datetimerange'
"
style="width: 360px"
v
-mod
el="searchData[col
.prop]"
:type="col
.filter
.filterFormType"
range
-separator="～"
start
-placeholder="开始时间"
end
-placeholder="结束时间"
:format="col
.dateType"
@change="changeData($event, col
.fi
eld, col
.dateType)"
/>
<div class="mt" style="text
-align: right">
<
el-button type="info" link @click="canc
elFilter(col
.prop)">重置</
el-button>
<
el-button type="primary" link @click="searchFilter">筛选</
el-button>
</div>
</div>
</
el-popover>
</template>
</div>
</template>
<template #default="scope">
<!
-- 显示图片
-->
<template v
-if="col
.templet === 'image'">
<template v
-if="col
.prop">
<template v
-if="Array
.isArray(scope
.row[col
.prop])">
<template v
-for="(item, index) in scope
.row[col
.prop]" :key="item">
<
el-image
:src="item"
:preview
-src
-list="scope
.row[col
.prop]"
:initial
-index="index"
:preview
-t
eleported="true"
:style="`width: ${col
.imageWidth ?? 40}px; height: ${col
.imageHeight ?? 40}px`"
/>
</template>
</template>
<template v
-else>
<
el-image
:src="scope
.row[col
.prop]"
:preview
-src
-list="[scope
.row[col
.prop]]"
:preview
-t
eleported="true"
:style="`width: ${col
.imageWidth ?? 40}px; height: ${col
.imageHeight ?? 40}px`"
/>
</template>
</template>
</template>
<!
-- 根据行的
selectList属性返回对应列表值
-->
<template v
-else
-if="col
.templet === 'list'">
<template v
-if="col
.prop">
{{ (col
.selectList ?? {})[scope
.row[col
.prop]] }}
</template>
</template>
<!
-- 格式化显示链接
-->
<template v
-else
-if="col
.templet === 'url'">
<template v
-if="col
.prop">
<
el-link type="primary" :href="scope
.row[col
.prop]" target="_blank">
{{ scope
.row[col
.prop] }}
</
el-link>
</template>
</template>
<!
-- 格式化为价格
-->
<template v
-else
-if="col
.templet === 'price'">
<template v
-if="col
.prop">
{{ `${col
.priceFormat ?? "￥"}${scope
.row[col
.prop]}` }}
</template>
</template>
<!
-- 格式化为百分比
-->
<template v
-else
-if="col
.templet === 'percent'">
<template v
-if="col
.prop">{{ scope
.row[col
.prop] }}%</template>
</template>
<!
-- 显示图标
-->
<template v
-else
-if="col
.templet === 'icon'">
<template v
-if="col
.prop">
<template v
-if="scope
.row[col
.prop]
.startsWith('
el-icon
-')">
<
el-icon>
<component :is="scope
.row[col
.prop]
.replace('
el-icon
-', '')" />
</
el-icon>
</template>
<template v
-else>
<div class="i
-svg:{{ scope
.row[col
.prop] }}" />
</template>
</template>
</template>
<!
-- 格式化时间
-->
<template v
-else
-if="col
.templet === 'date'">
<template v
-if="col
.prop">
{{
scope
.row[col
.prop]
? useDateFormat(scope
.row[col
.prop], col
.dateFormat ?? "YYYY
-MM
-DD HH:mm:ss")
.value
: ""
}}
</template>
</template>
<!
-- 格式代码集
-->
<template v
-else
-if="col
.templet === 'sys
-code'">
<FkSysCod
eLable v
-if="col
.prop" v
-mod
el="scope
.row[col
.prop]" :code="col
.sysCodeSetCode" />
</template>
<!
-- 可复制
-->
<template v
-else
-if="col
.templet === 'copy'">
<
el-text>{{ scope
.row[col
.prop] }}</
el-text>
<copy
-button
v
-if="scope
.row[col
.prop]"
:text="scope
.row[col
.prop]"
style="margin
-left: 2px"
/>
</template>
<!
-- yes
-no
-->
<template v
-else
-if="col
.templet === 'yes
-no'">
<
el-tag :type="scope
.row[col
.prop] == '1' ? 'success' : 'info'">
{{ scope
.row[col
.prop] == "1" ? "启用" : "禁用" }}
</
el-tag>
</template>
<!
-- translate
-->
<template v
-else
-if="col
.templet === 'translate'">
{{ scope
.row[col
.prop + "Name"] }}
</template>
</template>
</
el-table
-column>
</template>
<script setup lang="ts">
import _ from "lodash";
import SysOrgAPI from "@/api/zxyy
-org
-service/sysOrg/sysOrg
.api";
import { useSysCodeStore } from "@/store";
const sysCodeStore = useSysCodeStore();
import moment, { MomentInput } from "moment";
// 定义接收的属性
const props = defineProps<{ col: any; permPrefix?: any; last
SelectFormData?: any }>();
// 重写方法
const emit = defineEmits(["filter", "canc
elFilter"]);
// 解决办法：声明一下键值对的类型
type objType = {
[key: string]: any;
};
// 表头筛选处理
const showKey = ref(); // 当前展示哪个筛选
窗
const visible = ref(false); // 手动控制筛选
窗显隐
const refName = ref(); // 动态绑定在哪个表头图标下
const searchData = ref<objType>({}); // 搜索参数 每个表头字段
// 触发筛选
async function toggleNameFilter(key?: string, col?: any) {
if (!key) {
return;
}
// console
.log(key, item);
if (col
.filter
.needGetList) {
await getJavaList(col); // 调用后端接口 获取下拉数据
}
if (visible
.value && showKey
.value && showKey
.value !== key) {
visible
.value = false;
// fetchPageData(lastFormData, true);
}
refName
.value = document
.get
ElementById(key);
showKey
.value = key;
visible
.value = true;
}
// 某些下拉数据 例如下拉大数据有500条 直接赋值会导致表格卡顿 通过点击表头再去接口获取数据赋值就不会影响表格的渲染
// （列里面数据回显使用后端给的中文，或者将javaList赋值给item的
selectList）
let javaList = ref();
let javaListObj = ref<objType>({});
const getJavaList = async (col: any) => {
console
.log("getJavaList");
if (javaListObj
.value[col
.filter
.filterCodeSetId]) {
javaList
.value = javaListObj
.value[col
.filter
.filterCodeSetId];
console
.log("getJavaList
-javaListObj", javaList
.value);
return;
}
if (col
.filter
.filterCodeSetId == "org") {
console
.log("filterCodeSetId", col
.filter
.filterCodeSetId);
javaList
.value = await SysOrgAPI
.getSysOrgOptions();
}
if (col
.filter
.filterCodeSetId == "person") {
// javaList
.value = await SysOrgAPI
.getSysOrgOptions();
}
if (col
.filter
.filterCodeSetId == "sys
-code") {
javaList
.value = sysCodeStore
.getSysCodeSetItems(col
.sysCodeSetCode);
}
console
.log("javaList", javaList
.value);
javaListObj
.value[col
.filter
.filterCodeSetId] = javaList
.value;
console
.log("javaListObj", javaListObj
.value);
};
// 单独过滤
const applyNameFilter = () => {
// Filtering logic can be customized if needed
};
const applyTagFilter = () => {
// Filtering logic can be customized if needed
};
// 时间格式化
const changeData = (value: MomentInput[], key: string | number, dateType: string | undefined) => {
// console
.log(value, key, dateType);
if (!_
.isEmpty(value)) {
searchData
.value[key][0] = value[0] ? moment(value[0])
.format(dateType) : "";
searchData
.value[key][1] = value[1] ? moment(value[1])
.format(dateType) : "";
}
else {
searchData
.value[key] = [];
}
};
// 单个重置
function canc
elFilter(key: string) {
searchData
.value[key] = undefined;
emit("canc
elFilter", key);
// let filters = props
.last
SelectFormData
.filters
.filter((o: any) => {
// return o
.column != showKey
.value;
// });
// props
.last
SelectFormData
.filters = filters;
// let headers = props
.last
SelectFormData
.headers
.filter((o: any) => {
// return o
.fi
eld != showKey
.value;
// });
// props
.last
SelectFormData
.headers = headers;
visible
.value = false;
// console
.log("canc
elFilter", searchData
.value);
// fetchPageData(lastFormData, true);
//emit("canc
elFilter", key);
//emit("filter", props
.last
SelectFormData);
}
// 筛选
const searchFilter = () => {
console
.log("searchFilter");
visible
.value = false;
let filters = [];
let headers = [];
for (const key in searchData
.value) {
const col = props
.col;
if (col && Object
.hasOwnProperty
.call(searchData
.value, key) && searchData
.value[key]) {
filters
.push({
column: key,
value:
props
.col
.filter
.filterValueType === "string"
? searchData
.value[key]
.join(",")
: searchData
.value[key],
type: col
.filter
.filterType,
operator: col
.filter
.filterOperator,
});
headers
.push({
fi
eld: key,
name: col
.lab
el,
dataType: col
.filter
.filterDataType,
codeSetId: col
.filter
.filterCodeSetId,
});
}
}
props
.last
SelectFormData
.filters = filters;
props
.last
SelectFormData
.headers = headers;
emit("filter", props
.last
SelectFormData);
console
.log("searchFilter1");
console
.log("searchFilter2", props
.last
SelectFormData);
};
// 监听外部传入的 mod
elValue 变化
watch(
() => props
.last
SelectFormData
.filters,
(newValue) => {
if (!newValue || newValue
.length == 0) {
searchData
.value = {};
visible
.value = false;
}
},
{ immediate: true }
);
// 点击外部区域关闭弹
窗
const handleClickOutside = () => {
visible
.value = false;
};
</script>
<style lang="scss" scoped>
:deep(
.el-table) {
// height: 700px; /* 设置表格整体固定高度 */
thead {
.c
ell {
display: flex;
min
-width: 100px;
position: r
elative;
.table
-header
-div {
// flex: 1;
display: flex;
.title
-span {
flex
-grow: 1;
word
-break: break
-word;
/* 允许单词在任何地方断行 */
}
.el-only
-child__content {
height: 23px;
}
.icon
-span {
flex
-shrink: 0;
margin
-top: 1px;
margin
-left: 5px;
cursor: pointer;
/* 防止缩小 */
/* 给图标和标题之间添加一些间距 */
}
}
.caret
-wrapper {
margin
-top: 5px;
}
}
}
}
.filter
-container {
display: flex;
justify
-content: center;
align
-items: center;
}
/* 筛选图标激活状态
样式 */
.el-icon
.filter
-active {
color: #409eff !important; /*
Element UI的主题蓝色 */
}
</style>
优化，点击弹
窗外部，自动关闭弹
窗
本文讨论了在Vue.js应用中遇到的el-tooltip、el-select、el-popover等组件样式修改的问题，由于它们存在于全局HTML中，影响范围广泛。解决方法是在APP.vue中为这些组件添加自定义class，避免全局影响。同时，文章提到了el-tree组件中气泡窗口和自定义按钮的样式调整，提供了部分代码示例，鼓励读者根据实际情况进行调整。
扫一扫
2009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
