@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
821 lines (816 loc) • 32.5 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../querycondition/index.vue.js');
require('./renderCol.vue.js');
var elementPlus = require('element-plus');
var ClickOutside = require('./ClickOutside.js');
var useVirtualized = require('./useVirtualized.js');
var index_vue_vue_type_script_setup_true_lang = require('../querycondition/index.vue2.js');
var renderCol_vue_vue_type_script_setup_true_lang = require('./renderCol.vue2.js');
const _hoisted_1 = {
key: 0,
class: "table_query_condition"
};
const _hoisted_2 = ["element-loading-text"];
const _hoisted_3 = { key: 2 };
const _hoisted_4 = {
key: 0,
class: "fm-table-select__page"
};
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "FmSelectTable"
},
__name: "index",
props: {
modelValue: { default: void 0 },
inputValue: { default: void 0 },
defaultSelectVal: { default: () => [] },
radioSelectValLabel: { default: "" },
table: { default: () => ({
data: [],
currentPage: 1,
pageSize: 10,
total: 0
}) },
keywords: { default: () => ({
value: "value",
label: "label"
}) },
value: {},
columns: { default: () => [] },
multiple: { type: Boolean, default: false },
filterable: { type: Boolean, default: true },
remote: { type: Boolean, default: false },
remoteMethod: { type: Function, default: void 0 },
filterMethod: { type: Function, default: void 0 },
isShowInput: { type: Boolean, default: false },
inputAttr: { default: () => ({}) },
inputWidth: { default: 550 },
selectWidth: { default: 550 },
tableWidth: { default: 550 },
isShowQuery: { type: Boolean, default: false },
isShowBlurBtn: { type: Boolean, default: false },
btnBind: { default: () => ({ btnTxt: "\u5173\u95ED\u4E0B\u62C9\u6846" }) },
align: { default: "center" },
reserveSelection: { type: Boolean, default: true },
selectable: { type: Function, default: void 0 },
multipleFixed: { type: [String, Boolean], default: true },
radioTxt: { default: "\u5355\u9009" },
radioFixed: { type: [String, Boolean], default: true },
tableSize: { default: "default" },
border: { type: Boolean, default: true },
isShowFirstColumn: { type: Boolean, default: true },
useVirtual: { type: Boolean, default: false },
virtualShowSize: { default: 30 },
isShowPagination: { type: Boolean, default: false },
paginationSize: { default: "small" },
selfExpanded: { type: Boolean, default: false },
isClearQuery: { type: Boolean, default: false },
isRadioEchoLabel: { type: Boolean, default: true },
defaultValIsOpenRadioChange: { type: Boolean, default: false },
radioSameIsCancel: { type: Boolean, default: true },
rowClickRadio: { type: Boolean, default: true },
isKeyup: { type: Boolean, default: false },
isExpanded: { type: Boolean, default: false },
multipleDisableDelete: { type: Boolean, default: true },
tableLoading: { type: Boolean, default: false },
loadingTxt: { default: "\u52A0\u8F7D\u4E2D..." }
},
emits: ["page-change", "selectionChange", "radioChange", "update:inputValue", "input-focus", "input-blur", "input-clear", "input-click"],
setup(__props, { expose: __expose, emit: __emit }) {
const {
scrollContainerEl,
updateRenderedItemCache,
updateOffset,
getDom,
saveDATA,
getItemHeightFromCache
} = useVirtualized.useVirtualized();
const props = __props;
const vClickOutside = ClickOutside.default;
const emits = __emit;
const slots = vue.useSlots();
const isDefaultSelectVal = vue.ref(true);
const forbidden = vue.ref(true);
const isRadio = vue.ref(false);
const isQueryVisible = vue.ref(false);
const isVisible = vue.ref(false);
const radioVal = vue.ref("");
const isShowFirstRadio = vue.ref(props.isShowFirstColumn);
const selectDefaultLabel = vue.ref(props.modelValue);
const scrollTopNum = vue.ref(0);
let selectInputVal = vue.computed({
get() {
return props.inputValue;
},
set(val) {
emits("update:inputValue", val);
}
});
const state = vue.reactive({
defaultSelectValue: props.defaultSelectVal,
// 默认选中
tableData: props.table.data,
// table数据
defaultValue: props.value,
ids: [],
// 多选id集合
tabularMap: {}
// 存储下拉tale的所有name
});
const selectRef = vue.ref(null);
const selectTable = vue.ref(null);
const tQueryConditionRef = vue.ref(null);
const nowIndex = vue.ref(-1);
const tableDataLabelList = vue.computed(() => {
return state.tableData.map((item) => item[props.keywords.label]);
});
vue.watch(
() => props.table.data,
(val) => {
if (props.useVirtual) {
saveDATA.value = val;
updateRenderData(scrollTopNum.value);
} else {
state.tableData = val;
if (props.multiple && props.multipleDisableDelete) {
selectRef.value?.$el?.querySelectorAll(".el-tag").forEach((item) => {
if (tableDataLabelList.value?.includes(
item.querySelector(".el-select__tags-text")?.innerText
)) {
item.querySelector(".el-tag__close").style = "display: block";
} else {
item.querySelector(".el-tag__close").style = "display: none";
}
});
}
}
vue.nextTick(() => {
state.tableData && state.tableData.length > 0 && state.tableData.forEach((item) => {
state.tabularMap[item[props.keywords.value]] = item[props.keywords.label];
});
});
},
{ deep: true }
);
vue.watch(
() => props.defaultSelectVal,
(val) => {
state.defaultSelectValue = val;
if (val.length > 0) {
if (props.multiple) {
if (isDefaultSelectVal.value) {
defaultSelect(state.defaultSelectValue);
}
} else {
defaultSelect(state.defaultSelectValue);
}
}
},
{ deep: true }
);
vue.watch(
() => props.radioSelectValLabel,
(val) => {
if (val) findLabel();
},
{ deep: true }
);
vue.onMounted(() => {
if (state.defaultSelectValue && state.defaultSelectValue.length > 0 && isDefaultSelectVal.value) {
defaultSelect(state.defaultSelectValue);
}
if (props.selfExpanded) {
selectRef.value.expanded = true;
}
if (props.useVirtual) {
saveDATA.value = props.table.data;
isShowFirstRadio.value = false;
getDom(props);
scrollContainerEl.value?.addEventListener("scroll", handleScroll);
}
if (props.radioSelectValLabel) findLabel();
});
const updateRenderData = (scrollTop) => {
let startIndex = 0;
let offsetHeight = 0;
for (let i = 0; i < saveDATA.value.length; i++) {
offsetHeight += getItemHeightFromCache(i);
if (offsetHeight >= scrollTop) {
startIndex = i;
break;
}
}
state.tableData = saveDATA.value.slice(startIndex, startIndex + props.virtualShowSize);
updateRenderedItemCache(startIndex);
updateOffset(offsetHeight - getItemHeightFromCache(startIndex));
};
const handleScroll = (e) => {
scrollTopNum.value = e.target.scrollTop;
updateRenderData(scrollTopNum.value);
};
vue.onBeforeUnmount(() => {
if (props.useVirtual) {
scrollContainerEl.value?.removeEventListener("scroll", handleScroll);
}
});
vue.onUpdated(() => {
if (props.isShowQuery) {
selectTable.value.doLayout();
}
});
const visibleChange = (visible) => {
isVisible.value = visible;
if (isQueryVisible.value) {
selectRef.value.expanded = true;
}
if (visible) {
if (state.defaultSelectValue && state.defaultSelectValue.length > 0 && isDefaultSelectVal.value) {
defaultSelect(state.defaultSelectValue);
}
initTableData();
if (props.useVirtual) {
saveDATA.value = props.table.data;
updateRenderData(scrollTopNum.value);
}
} else {
if (tQueryConditionRef.value && props.isShowQuery && props.isClearQuery && !selectRef.value.expanded && !props.selfExpanded) {
tQueryConditionRef.value?.resetData();
}
findLabel();
filterMethodHandle("");
if (props.useVirtual) {
state.tableData = [];
saveDATA.value = [];
}
}
if (props.selfExpanded) {
selectRef.value.expanded = true;
}
};
const handleEvent = () => {
selectRef.value.expanded = true;
};
const queryVisibleChange = (val) => {
isQueryVisible.value = val;
};
const closeBox = () => {
if (tQueryConditionRef.value && props.isShowQuery) {
selectRef.value.expanded = true;
Object.values(tQueryConditionRef.value?.props?.opts).map((val) => {
if (val.comp.includes("select") || val.comp.includes("picker") || val.comp.includes("date")) {
val.eventHandle = {
"visible-change": ($event) => queryVisibleChange($event)
};
selectRef.value.expanded = true;
}
});
if (isVisible.value && props.isShowQuery) {
selectRef.value.expanded = true;
} else {
selectRef.value.expanded = false;
}
}
};
const attrs = vue.useAttrs();
const selectKeyup = (e) => {
if (!props.multiple && props.isKeyup && state.tableData.length > 0) {
const newIndex = nowIndex.value * 1;
const nextIndex = e.keyCode === 40 ? newIndex + 1 : e.keyCode === 38 ? newIndex - 1 : newIndex;
const rowHeight = selectTable.value.$el.querySelectorAll(".el-table__row")[0]?.clientHeight || 0;
const headerHeight = selectTable.value.$el.querySelectorAll(".el-table__header")[0]?.clientHeight || 0;
const attrsMaxHeight = (typeof (attrs["max-height"] || attrs["maxHeight"]) === "number" ? attrs["max-height"] || attrs["maxHeight"] : parseFloat(attrs["max-height"] || attrs["maxHeight"])) || 0;
const maxHeight = attrsMaxHeight ? attrsMaxHeight - headerHeight : 0;
const height = rowHeight * (nextIndex + 3);
const scrollTop = height > maxHeight ? height - maxHeight : 0;
if (attrsMaxHeight) {
selectTable.value.setScrollTop(scrollTop);
}
const validNextIndex = Math.max(0, Math.min(nextIndex, state.tableData.length - 1));
selectTable.value.setCurrentRow(state.tableData[validNextIndex]);
nowIndex.value = validNextIndex;
if (e.keyCode === 13) {
rowClick(state.tableData[validNextIndex]);
}
}
};
const findLabel = () => {
vue.nextTick(() => {
if (props.multiple) {
selectRef.value.selected?.forEach((item) => {
item.currentLabel = item.value;
});
} else {
if (props.isRadioEchoLabel) {
selectDefaultLabel.value = state.defaultValue && state.defaultValue[props.keywords.label] || props.radioSelectValLabel;
} else {
selectDefaultLabel.value = state.defaultValue && state.defaultValue[props.keywords.label] || "";
}
}
});
};
const handlesCurrentChange = (val) => {
if (props.multiple) {
if (!props.reserveSelection) {
clear();
}
} else {
reset();
}
emits("page-change", val);
};
const reset = () => {
if (!props.multiple) {
selectTable.value.setCurrentRow(-1);
nowIndex.value = -1;
radioVal.value = "";
isDefaultSelectVal.value = true;
forbidden.value = false;
}
};
const defaultSelect = (defaultSelectVal) => {
if (props.multiple) {
const multipleList = defaultSelectVal.map((val) => state.tableData.find((row) => row[props.keywords.value] === val)).filter(Boolean);
setTimeout(() => {
state.defaultValue = multipleList.map((item) => item[props.keywords.label]);
multipleList.forEach((row) => {
selectTable.value.toggleRowSelection(row, true);
});
selectRef.value?.selected?.forEach((item) => {
item.currentLabel = item.value;
});
}, 0);
} else {
setTimeout(() => {
const row = state.tableData.find((item) => item[props.keywords.value] === defaultSelectVal[0]);
if (row) {
radioVal.value = state.tableData.indexOf(row) + 1;
state.defaultValue = row;
selectDefaultLabel.value = row[props.keywords.label];
if (!props.defaultValIsOpenRadioChange) {
emits("radioChange", row, row[props.keywords.value]);
}
}
}, 0);
}
};
const handlesSelectionChange = (val) => {
isDefaultSelectVal.value = false;
state.defaultValue = val.map((item) => item[props.keywords.label]);
state.ids = val.map((item) => item[props.keywords.value]);
if (val.length === 0) {
isDefaultSelectVal.value = true;
state.defaultSelectValue = [];
}
emits("selectionChange", val, state.ids);
};
const getRowClassName = ({ row }) => {
if (!props.multiple && JSON.stringify(row) === JSON.stringify(state.defaultValue)) {
return "selected_row_style";
}
return "";
};
const getRowKey = (row) => {
return row[props.keywords.value];
};
const filterMethodHandle = (val) => {
if (!props.filterable) return;
if (props.filterable && props.remote && typeof props.remoteMethod === "function") {
props.remoteMethod(val);
return;
}
const tableData = JSON.parse(JSON.stringify(props.table?.data));
if (!tableData || tableData.length === 0) return;
if (!props.multiple) {
if (val) {
radioVal.value = "";
} else {
const defaultIndex = tableData.findIndex(
(item) => item[props.keywords.label] === selectDefaultLabel.value
);
if (defaultIndex !== -1) {
radioVal.value = defaultIndex + 1;
}
}
}
state.tableData = tableData.filter((item) => {
return item[props.keywords.label]?.includes(val);
});
if (selectDefaultLabel.value) {
const defaultIndex = state.tableData.findIndex(
(item) => item[props.keywords.label] === selectDefaultLabel.value
);
if (defaultIndex !== -1) {
radioVal.value = defaultIndex + 1;
}
}
};
const initTableData = () => {
vue.nextTick(() => {
if (props.multiple) {
state.defaultValue?.forEach((row) => {
const matchedRow = state.tableData.find(
(item) => item[props.keywords.value] === row[props.keywords.value]
);
if (matchedRow) {
selectTable.value.toggleRowSelection(matchedRow, true);
}
});
} else {
const matchedRow = state.tableData?.find(
(item) => item[props.keywords.value] === selectDefaultLabel.value
);
if (matchedRow) {
selectTable.value.setCurrentRow(matchedRow);
}
}
});
};
const copyToClipboard = async (text) => {
if (typeof text !== "string" || text.trim() === "") {
throw new Error("\u65E0\u6548\u7684\u590D\u5236\u5185\u5BB9");
}
try {
await navigator.clipboard.writeText(text);
} catch (error) {
if (error.name === "NotAllowedError" || error.name === "SecurityError") {
throw new Error("\u590D\u5236\u5931\u8D25\uFF1A\u6743\u9650\u88AB\u62D2\u7EDD");
} else {
throw new Error("\u590D\u5236\u5931\u8D25\uFF1A\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u6216\u53D1\u751F\u672A\u77E5\u9519\u8BEF");
}
}
};
const showMessage = (type, message) => {
if (type === "success") {
elementPlus.ElMessage.success(message);
} else {
elementPlus.ElMessage.error(message);
}
};
const cellDblclick = async (row, column) => {
const value = row[column.property];
try {
await copyToClipboard(String(value));
showMessage("success", "\u590D\u5236\u6210\u529F");
} catch (error) {
showMessage("error", error.message || "\u590D\u5236\u5931\u8D25");
}
};
const radioChangeHandle = (event, row, index) => {
event.preventDefault();
if (row.isRadioDisabled) return;
isDefaultSelectVal.value = false;
radioClick(row, index);
};
const isForbidden = () => {
forbidden.value = false;
setTimeout(() => {
forbidden.value = true;
}, 0);
};
const radioClick = (row, index) => {
forbidden.value = !forbidden.value;
if (radioVal.value === index) {
if (!props.radioSameIsCancel) return;
clear();
} else {
updateState(row, index);
}
if (props.isExpanded && state.defaultValue) {
selectDefaultLabel.value = state.defaultValue[props.keywords.label] || "";
selectRef.value.expanded = true;
} else {
blur();
}
};
const updateState = (row, index) => {
isForbidden();
radioVal.value = index;
state.defaultValue = row;
emits("radioChange", row, row[props.keywords.value]);
};
const rowClick = async (row) => {
if (row.isRadioDisabled) return;
if (!props.rowClickRadio) return;
if (!props.multiple) {
const rowIndex = props.table?.data.findIndex(
(item) => item[props.keywords.value] === row[props.keywords.value]
);
if (rowIndex !== -1) {
isDefaultSelectVal.value = false;
await radioClick(row, rowIndex + 1);
if (radioVal.value) {
isRadio.value = true;
} else {
isRadio.value = false;
}
}
}
};
const removeTag = (tag) => {
const row = state.tableData.find(
(item) => item[props.keywords.label] === tag
);
row && selectTable.value.toggleRowSelection(row, false);
isDefaultSelectVal.value = true;
};
const clear = () => {
const resetDefaultState = () => {
isDefaultSelectVal.value = true;
state.defaultSelectValue = [];
state.defaultValue = props.multiple ? [] : null;
};
if (!selectTable.value) {
console.warn("selectTable.value is not initialized");
return;
}
if (props.multiple === true) {
try {
selectTable.value.clearSelection();
} catch (error) {
console.error("Failed to clear selection:", error);
}
resetDefaultState();
} else if (props.multiple === false) {
try {
selectTable.value.setCurrentRow(-1);
} catch (error) {
console.error("Failed to set current row:", error);
}
nowIndex.value = -1;
radioVal.value = "";
forbidden.value = false;
selectDefaultLabel.value = null;
resetDefaultState();
emits("radioChange", null, null);
} else {
console.warn("Invalid value for props.multiple:", props.multiple);
}
};
const blur = () => {
selectRef.value.blur();
};
const focus = () => {
selectRef.value.focus();
};
const isShowSlot = (name) => {
return Object.keys(slots).includes(name);
};
__expose({
focus,
blur,
clear,
props,
state,
tQueryConditionRef,
selectRef,
selectTable
});
return (_ctx, _cache) => {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_table_column = vue.resolveComponent("el-table-column");
const _component_el_radio = vue.resolveComponent("el-radio");
const _component_el_table = vue.resolveComponent("el-table");
const _component_el_pagination = vue.resolveComponent("el-pagination");
const _component_el_select = vue.resolveComponent("el-select");
const _directive_loading = vue.resolveDirective("loading");
return _ctx.isShowInput ? (vue.openBlock(), vue.createBlock(_component_el_input, vue.mergeProps({
key: 0,
modelValue: vue.unref(selectInputVal),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(selectInputVal) ? selectInputVal.value = $event : selectInputVal = $event)
}, { clearable: true, ..._ctx.inputAttr }, {
onFocus: _cache[1] || (_cache[1] = () => emits("input-focus")),
onBlur: _cache[2] || (_cache[2] = () => emits("input-blur")),
onClick: _cache[3] || (_cache[3] = () => emits("input-click")),
onClear: _cache[4] || (_cache[4] = () => emits("input-clear")),
style: { width: _ctx.inputWidth ? `${_ctx.inputWidth}px` : "100%" }
}), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(slots), (_index, name) => {
return {
name,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
})
]), 1040, ["modelValue", "style"])) : vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_select, vue.mergeProps({
key: 1,
ref_key: "selectRef",
ref: selectRef,
"model-value": _ctx.multiple ? state.defaultValue : selectDefaultLabel.value,
"popper-class": "fm-select-table",
style: { width: _ctx.selectWidth ? `${_ctx.selectWidth}px` : "100%" },
"value-key": _ctx.keywords.value,
"filter-method": _ctx.filterMethod || filterMethodHandle,
onVisibleChange: visibleChange,
onRemoveTag: removeTag,
onClear: clear,
onKeyup: selectKeyup
}, { clearable: true, multiple: _ctx.multiple, filterable: _ctx.filterable, remote: _ctx.remote, remoteMethod: _ctx.remoteMethod, ..._ctx.$attrs }), {
empty: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
class: "fm-table-select__table",
style: vue.normalizeStyle({ width: _ctx.tableWidth ? `${_ctx.tableWidth}px` : "100%" })
},
[
_ctx.isShowQuery ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(
index_vue_vue_type_script_setup_true_lang.default,
vue.mergeProps({
ref_key: "tQueryConditionRef",
ref: tQueryConditionRef,
boolEnter: false,
onHandleEvent: handleEvent
}, _ctx.$attrs),
vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(slots), (_index, name) => {
return {
name,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
_ctx.isShowBlurBtn ? {
name: "querybar",
fn: vue.withCtx(() => [
vue.createVNode(
_component_el_button,
vue.mergeProps({ type: "danger", ..._ctx.btnBind }, { onClick: blur }),
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.btnBind.btnTxt || "\u5173\u95ED\u4E0B\u62C9\u6846"),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
),
vue.renderSlot(_ctx.$slots, "querybar")
]),
key: "0"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: "header_wrap",
style: vue.normalizeStyle({ paddingBottom: isShowSlot("toolbar") ? "10px" : 0 })
},
[
vue.renderSlot(_ctx.$slots, "toolbar")
],
4
/* STYLE */
),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: "table_content",
"element-loading-text": _ctx.loadingTxt
}, [
vue.createVNode(_component_el_table, vue.mergeProps({
ref_key: "selectTable",
ref: selectTable,
data: state.tableData,
class: {
radioStyle: !_ctx.multiple,
highlightCurrentRow: isRadio.value,
keyUpStyle: _ctx.isKeyup,
fm_select_table_multiple: _ctx.useVirtual && _ctx.multiple,
fm_select_table_radio: _ctx.useVirtual && !_ctx.multiple
},
"row-class-name": getRowClassName,
"row-key": getRowKey,
onRowClick: rowClick,
onCellDblclick: cellDblclick,
onSelectionChange: handlesSelectionChange
}, { border: _ctx.border, size: _ctx.tableSize, "highlight-current-row": true, ..._ctx.$attrs }), {
default: vue.withCtx(() => [
_ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_el_table_column, {
key: 0,
type: "selection",
width: _ctx.tableSize === "large" ? 65 : 55,
align: _ctx.align || "center",
"reserve-selection": _ctx.reserveSelection,
selectable: _ctx.selectable,
fixed: _ctx.multipleFixed
}, null, 8, ["width", "align", "reserve-selection", "selectable", "fixed"])) : vue.createCommentVNode("v-if", true),
!_ctx.multiple && isShowFirstRadio.value ? (vue.openBlock(), vue.createBlock(_component_el_table_column, {
key: 1,
type: "radio",
width: _ctx.tableSize === "large" ? 65 : 55,
label: _ctx.radioTxt,
fixed: _ctx.radioFixed,
align: _ctx.align || "center"
}, {
default: vue.withCtx((scope) => [
vue.createVNode(_component_el_radio, {
modelValue: radioVal.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => radioVal.value = $event),
label: scope.$index + 1,
disabled: scope.row.isRadioDisabled,
onClick: vue.withModifiers(($event) => radioChangeHandle($event, scope.row, scope.$index + 1), ["stop"])
}, null, 8, ["modelValue", "label", "disabled", "onClick"])
]),
_: 1
/* STABLE */
}, 8, ["width", "label", "fixed", "align"])) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.columns, (item, index) => {
return vue.openBlock(), vue.createBlock(_component_el_table_column, vue.mergeProps({
key: index + "i",
type: item.type,
label: item.label,
prop: item.prop,
"min-width": item["min-width"] || item.minWidth,
width: item.width,
align: item.align || _ctx.align || "center",
fixed: item.fixed
}, { ref_for: true }, { "show-overflow-tooltip": true, ...item.bind }), {
default: vue.withCtx((scope) => [
vue.createCommentVNode(" render\u65B9\u5F0F "),
item.render ? (vue.openBlock(), vue.createBlock(renderCol_vue_vue_type_script_setup_true_lang.default, {
key: 0,
column: item,
row: scope.row,
render: item.render,
index: scope.$index
}, null, 8, ["column", "row", "render", "index"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u4F5C\u7528\u57DF\u63D2\u69FD "),
item.slotName ? vue.renderSlot(_ctx.$slots, item.slotName, {
key: 1,
scope
}) : vue.createCommentVNode("v-if", true),
!item.render && !item.slotName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(scope.row[item.prop]),
1
/* TEXT */
)
])) : vue.createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, 1040, ["type", "label", "prop", "min-width", "width", "align", "fixed"]);
}),
128
/* KEYED_FRAGMENT */
)),
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}, 16, ["data", "class"]),
_ctx.isShowPagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
vue.createVNode(_component_el_pagination, vue.mergeProps({
"current-page": _ctx.table.currentPage,
"onUpdate:currentPage": _cache[6] || (_cache[6] = ($event) => _ctx.table.currentPage = $event),
"page-size": _ctx.table.pageSize,
"onUpdate:pageSize": _cache[7] || (_cache[7] = ($event) => _ctx.table.pageSize = $event),
onCurrentChange: handlesCurrentChange,
layout: "total, prev, pager, next, jumper",
"pager-count": _ctx.table["pager-count"] || 5,
total: _ctx.table.total
}, { background: true, size: _ctx.paginationSize || "small", ..._ctx.$attrs }), null, 16, ["current-page", "page-size", "pager-count", "total"])
])) : vue.createCommentVNode("v-if", true)
], 8, _hoisted_2)), [
[_directive_loading, _ctx.tableLoading]
]),
vue.renderSlot(_ctx.$slots, "footer")
],
4
/* STYLE */
)
]),
_: 3
/* FORWARDED */
}, 16, ["model-value", "style", "value-key", "filter-method"])), [
[vue.unref(vClickOutside), closeBox]
]);
};
}
});
exports.default = _sfc_main;