@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
791 lines (786 loc) • 32.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var elementPlus = require('element-plus');
var index = require('../../../api/base/index.js');
const _hoisted_1 = { class: "w100 selector-loading-container" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "Fminputtable"
},
__name: "index",
props: {
/**
* 使用示例：
*
* 单选模式：
* <pulldown-selecter
* v-model="state.ruleForm.userId"
* :defaultOptions="[ id: state.ruleForm.userId, realName: state.ruleForm.realName ]"
* :fetch-options="handleSysUserTable"
* :queryParams="state.queryParams"
* :dropdown-width="dropdownWidth"
* :placeholder="placeholder"
* :label-prop="realName"
* :value-prop="id"
* @@change="handelChange"
* filterable
* clearable
* class="w100"
* >
*
* 多选模式：
* <pulldown-selecter
* v-model="state.ruleForm.userIds"
* :defaultOptions="state.ruleForm.defaultUsers"
* :fetch-options="handleSysUserTable"
* :queryParams="state.queryParams"
* :dropdown-width="dropdownWidth"
* :placeholder="placeholder"
* :label-prop="realName"
* :value-prop="id"
* @@change="handelChange"
* multiple
* filterable
* clearable
* class="w100"
* >
*
* 查询条件表单插槽：
* <template #queryForm="{ query, handleQuery }">
* <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
* <el-form-item label="姓名" prop="realName">
* <el-input v-model="query.realName" placeholder="请输入姓名" class="w100" clearable @keydown.enter.native="handleQuery()" />
* </el-form-item>
* </el-col>
* <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
* <el-form-item label="电话" prop="phone">
* <el-input v-model="query.phone" placeholder="请输入电话" class="w100" clearable @keydown.enter.native="handleQuery()" />
* </el-form-item>
* </el-col>
* </template>
*
* 表格列插槽：
* <template #columns>
* <el-table-column prop="realName" label="姓名" />
* <el-table-column prop="account" label="账号" width="160"/ >
* <el-table-column prop="idCardNo" label="身份证号" width="140" />
* <el-table-column prop="cardNo" label="卡号" width="140" />
* <el-table-column prop="gender" label="性别" width="85">
* <template #default="{ row }">
* <g-sys-dict v-model="row.gender" code="GenderEnum" />
* </template>
* </el-table-column>
* <el-table-column prop="birthday" label="生日">
* <template #default="{ row, $index }">
* {{ commonFun.dateFormatYMD(row, $index, row.birthday) }}
* </template>
* </el-table-column>
* <el-table-column prop="phone" label="联系电话" width="100" />
* </template>
* </pulldown-selecter>
*/
// v-model绑定的值，支持字符串、数字、数组或null类型
modelValue: [String, Number, Array, null],
/**
* 获取表格数据的异步方法（必填）
* @example
* const handleSysUserTable = (params: any) => {
* return getAPI(SysUserApi).apiSysUserPagePost(params);
* };
*/
fetchOptions: {
type: Function
// 函数类型
//required: true, // 必填项
},
//本地数据开启 和本地数据联合一起使用
islocalData: {
type: Boolean,
default: false
},
localdataList: {
type: Array,
default: []
},
/**
* api service name
*/
apiService: {
type: String,
default: "baseData"
},
/**
* api service 下的方法
*/
apiAction: {
type: String,
default: "BaseData"
},
/**
* 基础编码 自动获取数据
*/
method: {
type: String,
default: "post"
},
/**
* 选中记录后绑定值的属性名
* 默认为'id'，即选中某行后，会取该行数据的id字段作为值
*/
valueProp: {
type: String,
default: "id"
},
/**
* 选中记录后显示文本的属性名
* 默认为'name'，即在下拉框中显示的文本取自该字段
*/
labelProp: {
type: String,
default: "name"
},
/**
* 显示值的格式化方法
* 可以自定义选中后在输入框中显示的文本格式
* @example
* :labelFormat="(item: any) => `${item.realName}(${item.account})`"
*/
labelFormat: {
type: Function,
default: (item) => void 0
// 默认不进行格式化
},
/**
* 默认查询条件的属性名
* 在输入框中输入的关键词会赋值给该字段
*/
keywordProp: {
type: String,
default: "keyword"
},
/**
* 下拉框的宽度
*/
dropdownWidth: {
type: String,
default: "100%"
},
/**
* 下拉框的高度
*/
dropdownHeight: {
type: String,
default: "550px"
},
/**
* 输入框的占位符文本
*/
placeholder: {
type: String,
default: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD"
},
/**
* 默认选项，用于回显已选中的数据
* 当数据不在当前页时，通过该属性提供数据进行回显
*/
defaultOptions: {
type: Array,
default: []
},
/**
* 查询表单的高度偏移量
* 用于计算表格高度时减去查询表单占用的高度
*/
queryHeightOffset: {
type: Number,
default: 35
},
/**
* 查询表单标签的宽度
*/
queryLabelWidth: {
type: String
},
/**
* 查询参数对象
* 父组件传入的额外查询条件，会与组件内部的查询条件合并
*/
queryParams: {
type: Object,
default: () => {
return {};
}
},
/**
* 是否显示分页组件
*/
pagination: {
type: Boolean,
default: true
},
/**
* 是否禁用组件
*/
disabled: Boolean,
/**
* 是否多选模式
*/
multiple: Boolean,
/**
* 是否可清空
*/
clearable: Boolean
},
emits: ["update:modelValue", "change"],
setup(__props, { expose: __expose, emit: __emit }) {
const CONSTANTS = {
MAX_PAGE_SIZE: 99999,
// 不分页时的最大页面大小
DROPDOWN_DELAY: 1e3,
// 下拉框打开后的延迟时间（毫秒）
TABLE_HEIGHT_OFFSET: 175
// 表格高度基础偏移量（像素）
};
const props = __props;
const tableRef = vue.ref();
const selectRef = vue.ref();
const emit = __emit;
const state = vue.reactive({
// 当前选中的值，单选时为字符串/数字，多选时为数组
selectedValues: "",
// 表格查询参数对象
tableQuery: {
[props.keywordProp]: "",
// 动态属性名，默认为'keyword'，用于存储搜索关键词
page: props.queryParams.page,
// 当前页码，从父组件传入
pageSize: props.queryParams?.pageSize
// 每页显示数量，从父组件传入
},
// 表格数据对象
tableData: {
items: [],
// 当前页的数据列表
total: 0
// 总数据条数
},
// 默认选项数组，用于回显
defaultOptions: props.defaultOptions,
// 加载状态标识
loading: false,
// 选中的行数据数组，用于表格高亮显示和跨页选择
selectedRows: [],
// 查询执行标识，防止重复执行
isQuerying: false,
// 下拉框是否刚打开的标识（用于防止remoteMethod在打开时重复查询）
justOpened: false
});
const currentRowIndex = vue.ref(-1);
const tableHeight = vue.computed(() => {
const baseHeight = `${props.dropdownHeight} - ${CONSTANTS.TABLE_HEIGHT_OFFSET}px`;
const queryOffset = props.queryHeightOffset > 0 ? ` - ${props.queryHeightOffset}px` : "";
return `calc(${baseHeight}${queryOffset})`;
});
const mergeSelectedRows = (values) => {
const currentPageRows = state.tableData.items.filter(
(item) => values.includes(item[props.valueProp])
);
const previousRows = state.selectedRows.filter(
(item) => values.includes(item[props.valueProp])
);
const allRows = [...currentPageRows];
previousRows.forEach((row) => {
if (!allRows.find((item) => item[props.valueProp] === row[props.valueProp])) {
allRows.push(row);
}
});
return allRows;
};
const isRowSelected = (row) => {
if (!row || row[props.valueProp] === void 0 || row[props.valueProp] === null) {
return false;
}
if (props.multiple) {
if (!Array.isArray(state.selectedValues)) {
return false;
}
return state.selectedValues.some((val) => val === row[props.valueProp]);
} else {
return state.selectedValues !== null && state.selectedValues !== void 0 && state.selectedValues === row[props.valueProp];
}
};
const updateSelectedRows = () => {
if (props.multiple) {
const selectedValues = Array.isArray(state.selectedValues) ? state.selectedValues : [];
state.selectedRows = mergeSelectedRows(selectedValues);
} else {
const selectedRow = state.tableData.items.find(
(item) => item[props.valueProp] === state.selectedValues
);
state.selectedRows = selectedRow ? [selectedRow] : [];
}
};
const handleKeydown = (e) => {
const tableData = state.tableData?.items || [];
if (!tableData.length) return;
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault();
const direction = e.key === "ArrowDown" ? 1 : -1;
const newIndex = Math.max(0, Math.min(currentRowIndex.value + direction, tableData.length - 1));
if (newIndex !== currentRowIndex.value) {
currentRowIndex.value = newIndex;
const row = tableData[newIndex];
tableRef.value?.setCurrentRow(row);
}
} else if (e.key === "Enter") {
const row = tableData[currentRowIndex.value];
handleChange(row);
}
};
const handleSizeChange = (pageSize) => {
state.loading = true;
state.tableQuery.pageSize = pageSize;
state.tableQuery.page = 1;
executeQuery();
};
const handleCurrentChange = (page) => {
state.loading = true;
state.tableQuery.page = page;
executeQuery();
};
vue.onMounted(() => {
selectRef.value?.inputRef?.addEventListener("keydown", handleKeydown);
});
vue.onUnmounted(() => {
selectRef.value?.inputRef?.removeEventListener("keydown", handleKeydown);
});
const executeQuery = () => {
if (state.isQuerying) {
return;
}
state.isQuerying = true;
state.loading = true;
const finalParams = Object.assign({}, props.queryParams, state.tableQuery);
if (typeof props.fetchOptions === "function") {
props.fetchOptions(finalParams).then((res) => {
const result = res.data?.result;
state.tableData.items = result?.items ?? [];
state.tableData.total = result?.total ?? 0;
state.loading = false;
state.isQuerying = false;
updateSelectedRows();
}).catch((error) => {
elementPlus.ElMessage.error("\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
state.tableData.items = [];
state.tableData.total = 0;
state.loading = false;
state.isQuerying = false;
});
} else if (props.islocalData) {
state.tableData.items = props.localdataList;
state.tableData.total = 1;
state.loading = false;
state.isQuerying = false;
updateSelectedRows();
} else {
if (props.method == "post") {
index.useBaseApi(props.apiAction).post(finalParams, props.apiAction).then((res) => {
const result = res.data?.result;
state.tableData.items = result?.items ?? [];
state.tableData.total = result?.total ?? 0;
state.loading = false;
state.isQuerying = false;
updateSelectedRows();
}).catch((error) => {
elementPlus.ElMessage.error("\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
state.tableData.items = [];
state.tableData.total = 0;
state.loading = false;
state.isQuerying = false;
});
} else {
index.useBaseApi(props.apiAction).get(finalParams, props.apiAction).then((res) => {
const result = res.data?.result;
state.tableData.items = result?.items ?? [];
state.tableData.total = result?.total ?? 0;
state.loading = false;
state.isQuerying = false;
updateSelectedRows();
}).catch((error) => {
elementPlus.ElMessage.error("\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
state.tableData.items = [];
state.tableData.total = 0;
state.loading = false;
state.isQuerying = false;
});
}
}
};
const resetQuery = () => {
state.loading = true;
const currentPageSize = state.tableQuery.pageSize;
state.tableQuery = Object.assign({}, props.queryParams, { pageSize: currentPageSize });
state.tableQuery.page = 1;
executeQuery();
};
const remoteMethod = (query) => {
if (state.justOpened) {
state.justOpened = false;
return;
}
if (state.isQuerying) {
return;
}
state.loading = true;
if (typeof query === "string") {
state.tableQuery[props.keywordProp] = query.trim();
state.tableQuery.page = 1;
}
executeQuery();
};
const handleQuery = (clearKeyword = false) => {
state.loading = true;
if (clearKeyword) {
state.tableQuery[props.keywordProp] = void 0;
const input = selectRef.value.$el.querySelector("input");
if (input) input.value = "";
}
state.tableQuery.page = 1;
remoteMethod(state.tableQuery);
};
const handleQueryClick = () => {
state.loading = true;
state.tableQuery.page = 1;
executeQuery();
};
const handleChange = (row) => {
if (!row || !row[props.valueProp]) return;
if (typeof row[props.valueProp] === "string") row[props.valueProp] = row[props.valueProp]?.trim();
setDefaultOptions([row]);
if (props.multiple) {
if (!Array.isArray(state.selectedValues)) {
state.selectedValues = [];
}
const currentValues = Array.isArray(state.selectedValues) ? [...state.selectedValues] : [];
const valueIndex = currentValues.indexOf(row[props.valueProp]);
if (valueIndex > -1) {
currentValues.splice(valueIndex, 1);
state.selectedRows = state.selectedRows.filter((item) => item[props.valueProp] !== row[props.valueProp]);
} else {
currentValues.push(row[props.valueProp]);
const existingRow = state.selectedRows.find((item) => item[props.valueProp] === row[props.valueProp]);
if (!existingRow) {
state.selectedRows.push(row);
}
}
state.selectedValues = currentValues;
} else {
state.selectedValues = row[props.valueProp];
state.selectedRows = [row];
}
emit("update:modelValue", state.selectedValues);
emit("change", state.selectedValues, props.multiple ? state.selectedRows : row);
if (!props.multiple) {
tableRef.value?.setCurrentRow(row);
selectRef.value?.blur();
}
};
const selectVisibleChange = (visible) => {
if (visible) {
state.loading = true;
state.justOpened = true;
const paginationParams = {
page: state.tableQuery.page,
// 保留当前页码
pageSize: state.tableQuery.pageSize,
// 保留分页大小
[props.keywordProp]: void 0
// 清空关键词（打开时不带搜索条件）
};
state.tableQuery = Object.assign({}, props.queryParams, paginationParams);
executeQuery();
setTimeout(() => {
state.justOpened = false;
}, CONSTANTS.DROPDOWN_DELAY);
} else {
state.loading = false;
state.justOpened = false;
}
};
const setDefaultOptions = (options) => {
const map = /* @__PURE__ */ new Map();
for (const item of [...options ?? [], ...state.defaultOptions]) {
const value = item?.[props.valueProp];
const label = props.labelFormat?.(item) || item?.[props.labelProp];
if (value && label) {
map.set(value, { [props.valueProp]: value, [props.labelProp]: label });
}
}
state.defaultOptions = Array.from(map.values());
};
const setQueryParams = (query, append = true) => {
if (!props.pagination) {
query = Object.assign(query, {
pageSize: CONSTANTS.MAX_PAGE_SIZE
});
}
query = Object.assign({}, props.queryParams, query ?? {});
state.tableQuery = append ? Object.assign(state.tableQuery, query) : query;
};
const setValue = (option, row) => {
option = Array.isArray(option) ? option : [option];
state.tableData.total = option.length;
state.tableData.items = option;
if (props.multiple) {
state.selectedValues = option.map((item) => item[props.valueProp]);
state.selectedRows = option;
emit("update:modelValue", state.selectedValues);
emit("change", state.selectedValues, option);
} else {
state.selectedValues = option[0]?.[props.valueProp];
state.selectedRows = option[0] ? [option[0]] : [];
emit("update:modelValue", state.selectedValues);
emit("change", state.selectedValues, option[0]);
}
};
const selectedValuesChange = (val) => {
state.selectedValues = val;
emit("update:modelValue", val);
if (props.multiple) {
const selectedValues = Array.isArray(val) ? val : [];
const allSelectedRows = mergeSelectedRows(selectedValues);
state.selectedRows = allSelectedRows;
emit("change", val, allSelectedRows);
} else {
const selectedRow = state.tableData?.items?.find((item) => item[props.valueProp] === val);
if (selectedRow) {
state.selectedRows = [selectedRow];
tableRef.value?.setCurrentRow(selectedRow);
} else {
state.selectedRows = [];
tableRef.value?.setCurrentRow(null);
}
emit("change", val, selectedRow);
}
};
const getRowStyle = ({ row }) => {
return isRowSelected(row) ? {
backgroundColor: "var(--el-color-primary-light-9)",
borderLeft: "3px solid var(--el-color-primary)"
} : {};
};
const getRowClassName = ({ row }) => {
return isRowSelected(row) ? "selected-row" : "";
};
vue.watch(
() => props.modelValue,
// 监听的数据源
(val) => {
if (props.multiple) {
state.selectedValues = Array.isArray(val) ? val : val ? [val] : [];
} else {
state.selectedValues = val;
}
updateSelectedRows();
},
{ immediate: true }
// 立即执行一次，确保初始化时也能正确设置
);
vue.watch(
() => props.defaultOptions,
// 监听的数据源
(val) => setDefaultOptions(val),
// 调用设置方法
{ immediate: true }
// 立即执行一次
);
__expose({
setValue,
// 设置选中值（用于程序化设置选中的数据）
handleQuery,
// 执行查询（用于手动触发查询，可选择是否清空关键词）
setQueryParams,
// 设置查询参数（用于动态修改查询条件）
setDefaultOptions
// 设置默认选项（用于手动添加回显选项）
});
return (_ctx, _cache) => {
const _component_el_option = vue.resolveComponent("el-option");
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_button_group = vue.resolveComponent("el-button-group");
const _component_el_row = vue.resolveComponent("el-row");
const _component_el_form = vue.resolveComponent("el-form");
const _component_el_empty = vue.resolveComponent("el-empty");
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_reclick = vue.resolveDirective("reclick");
const _directive_loading = vue.resolveDirective("loading");
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createCommentVNode(" Element Plus\u4E0B\u62C9\u9009\u62E9\u5668\u7EC4\u4EF6 "),
vue.createVNode(_component_el_select, vue.mergeProps(_ctx.$attrs, {
modelValue: state.selectedValues,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.selectedValues = $event),
clearable: __props.clearable,
multiple: __props.multiple,
disabled: __props.disabled,
placeholder: __props.placeholder,
"remote-method": remoteMethod,
onVisibleChange: selectVisibleChange,
onChange: selectedValuesChange,
style: { width: __props.dropdownWidth },
"popper-class": "popper-class",
ref_key: "selectRef",
ref: selectRef,
"remote-show-suffix": "",
filterable: "",
remote: ""
}), {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u9690\u85CF\u7684\u9009\u9879\uFF0C\u7528\u4E8E\u5360\u4F4D\uFF0C\u9632\u6B62Element Plus\u8B66\u544A "),
vue.createVNode(_component_el_option, {
style: { "width": "0", "height": "0" },
value: ""
}),
vue.createCommentVNode(" \u9ED8\u8BA4\u9009\u9879\uFF0C\u7528\u4E8E\u56DE\u663E\u6570\u636E "),
vue.createCommentVNode(" \u5F53\u9009\u4E2D\u7684\u6570\u636E\u4E0D\u5728\u5F53\u524D\u9875\u65F6\uFF0C\u901A\u8FC7\u8FD9\u4E9B\u9690\u85CF\u9009\u9879\u8FDB\u884C\u56DE\u663E "),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(state.defaultOptions ?? [], (item) => {
return vue.openBlock(), vue.createBlock(_component_el_option, {
key: item[__props.valueProp],
label: __props.labelFormat(item) || item[__props.labelProp],
value: item[__props.valueProp],
style: { "width": "0", "height": "0" }
}, null, 8, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
)),
vue.createCommentVNode(" \u4E0B\u62C9\u6846\u5185\u5BB9\u533A\u57DF "),
vue.createCommentVNode(' \r\n v-loading\u6307\u4EE4\uFF1A\u663E\u793A\u52A0\u8F7D\u52A8\u753B\r\n \u6CE8\u610F\uFF1Aloading\u72B6\u6001\u653E\u5728div\u4E0A\u800C\u4E0D\u662Ftable\u4E0A\uFF0C\u662F\u4E3A\u4E86\u8986\u76D6\u6574\u4E2A\u4E0B\u62C9\u533A\u57DF\uFF08\u5305\u62EC\u67E5\u8BE2\u8868\u5355\u548C\u5206\u9875\uFF09\r\n \u8FD9\u6837\u53EF\u4EE5\u907F\u514D\u67E5\u8BE2\u65F6\u95EA\u73B0"\u6682\u65E0\u6570\u636E"\u7684\u63D0\u793A\r\n '),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createCommentVNode(" \u67E5\u8BE2\u8868\u5355\u533A\u57DF\uFF08\u4EC5\u5F53\u7236\u7EC4\u4EF6\u63D0\u4F9B\u4E86queryForm\u63D2\u69FD\u65F6\u663E\u793A\uFF09 "),
_ctx.$slots.queryForm ? (vue.openBlock(), vue.createBlock(_component_el_form, {
key: 0,
model: state.tableQuery,
class: "mg5 query-form",
"label-width": __props.queryLabelWidth ?? "",
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"]))
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_row, { gutter: 10 }, {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u67E5\u8BE2\u8868\u5355\u63D2\u69FD\uFF1A\u7531\u7236\u7EC4\u4EF6\u63D0\u4F9B\u8868\u5355\u5185\u5BB9 "),
vue.renderSlot(_ctx.$slots, "queryForm", {
query: state.tableQuery,
handleQuery: () => handleQuery(true)
}, void 0, true),
vue.createCommentVNode(" \u67E5\u8BE2\u548C\u91CD\u7F6E\u6309\u94AE\u7EC4 "),
vue.createVNode(_component_el_button_group, { style: { "position": "absolute", "right": "10px" } }, {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u67E5\u8BE2\u6309\u94AE\uFF1A\u70B9\u51FB\u65F6\u7ACB\u5373\u663E\u793A\u52A0\u8F7D\u52A8\u753B\u5E76\u6267\u884C\u67E5\u8BE2 "),
vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
type: "primary",
icon: "ele-Search",
onClick: handleQueryClick
}, {
default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
vue.createTextVNode(
" \u67E5\u8BE2 ",
-1
/* CACHED */
)
])]),
_: 1
/* STABLE */
})), [
[_directive_reclick, 1e3]
]),
vue.createCommentVNode(" \u91CD\u7F6E\u6309\u94AE\uFF1A\u91CD\u7F6E\u67E5\u8BE2\u6761\u4EF6\u5E76\u91CD\u65B0\u67E5\u8BE2 "),
vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
icon: "ele-Refresh",
onClick: resetQuery
}, {
default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
vue.createTextVNode(
" \u91CD\u7F6E ",
-1
/* CACHED */
)
])]),
_: 1
/* STABLE */
})), [
[_directive_reclick, 1e3]
])
]),
_: 1
/* STABLE */
})
]),
_: 3
/* FORWARDED */
})
]),
_: 3
/* FORWARDED */
}, 8, ["model", "label-width"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \r\n \u6570\u636E\u8868\u683C \r\n \u5173\u952E\u914D\u7F6E\u8BF4\u660E\uFF1A\r\n 1. height: \u52A8\u6001\u8BA1\u7B97\u9AD8\u5EA6\uFF0C\u6709\u67E5\u8BE2\u8868\u5355\u65F6\u4F7F\u7528\u8BA1\u7B97\u5C5E\u6027tableHeight\uFF0C\u5426\u5219\u4F7F\u7528\u56FA\u5B9A\u8BA1\u7B97\u5F0F\r\n 2. highlight-current-row: \u5355\u9009\u6A21\u5F0F\u542F\u7528\u884C\u9AD8\u4EAE\uFF0C\u591A\u9009\u6A21\u5F0F\u7981\u7528\uFF08\u591A\u9009\u7528row-style\u5B9E\u73B0\uFF09\r\n 3. row-class-name: \u4E3A\u9009\u4E2D\u884C\u6DFB\u52A0'selected-row'\u7C7B\u540D\uFF0C\u7528\u4E8ECSS\u6837\u5F0F\u63A7\u5236\r\n 4. row-style: \u4E3A\u9009\u4E2D\u884C\u6DFB\u52A0\u5185\u8054\u6837\u5F0F\uFF08\u80CC\u666F\u8272\u548C\u5DE6\u8FB9\u6846\uFF09\uFF0C\u786E\u4FDD\u8DE8\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\r\n\r\n ({ row }: { row: any }) => isRowSelected(row) ? 'selected-row' : ''\r\n ({ row }: { row: any }) => isRowSelected(row) ? { backgroundColor: 'var(--el-color-primary-light-9)', borderLeft: '3px solid var(--el-color-primary)' } : {}\r\n "),
vue.createVNode(_component_el_table, {
ref_key: "tableRef",
ref: tableRef,
onRowClick: handleChange,
data: state.tableData?.items ?? [],
height: _ctx.$slots.queryForm ? tableHeight.value : `calc(${__props.dropdownHeight} - ${CONSTANTS.TABLE_HEIGHT_OFFSET}px)`,
"highlight-current-row": !__props.multiple,
"row-class-name": getRowClassName,
"row-style": getRowStyle
}, {
empty: vue.withCtx(() => [
!state.loading ? (vue.openBlock(), vue.createBlock(_component_el_empty, {
key: 0,
"image-size": 25
})) : vue.createCommentVNode("v-if", true)
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "columns", {}, void 0, true)
]),
_: 3
/* FORWARDED */
}, 8, ["data", "height", "highlight-current-row"]),
vue.createCommentVNode(" \r\n \u5206\u9875\u7EC4\u4EF6\uFF08\u4EC5\u5F53\u542F\u7528\u5206\u9875\u65F6\u663E\u793A\uFF09\r\n \u914D\u7F6E\u8BF4\u660E\uFF1A\r\n 1. disabled: \u52A0\u8F7D\u65F6\u7981\u7528\u5206\u9875\u64CD\u4F5C\uFF0C\u9632\u6B62\u91CD\u590D\u8BF7\u6C42\r\n 2. pager-count: \u663E\u793A5\u4E2A\u9875\u7801\u6309\u94AE\uFF0C\u9002\u5408\u4E0B\u62C9\u6846\u7684\u6709\u9650\u7A7A\u95F4\r\n 3. layout: \u7B80\u5316\u5E03\u5C40\uFF08\u53EA\u663E\u793A\u4E0A\u4E00\u9875\u3001\u9875\u7801\u3001\u4E0B\u4E00\u9875\uFF09\uFF0C\u8282\u7701\u7A7A\u95F4\r\n 4. size: \u4F7F\u7528\u5C0F\u5C3A\u5BF8\uFF0C\u9002\u914D\u4E0B\u62C9\u6846\u9AD8\u5EA6\r\n "),
props.pagination ? (vue.openBlock(), vue.createBlock(_component_el_pagination, {
key: 1,
disabled: state.loading,
currentPage: state.tableQuery.page,
"page-size": state.tableQuery.pageSize,
total: state.tableData.total,
"pager-count": 5,
onSizeChange: handleSizeChange,
onCurrentChange: handleCurrentChange,
layout: "prev, pager, next",
size: "small",
background: ""
}, null, 8, ["disabled", "currentPage", "page-size", "total"])) : vue.createCommentVNode("v-if", true)
])), [
[_directive_loading, state.loading]
])
]),
_: 3
/* FORWARDED */
}, 16, ["modelValue", "clearable", "multiple", "disabled", "placeholder", "style"])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
);
};
}
});
exports.default = _sfc_main;