yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
211 lines (210 loc) • 7.04 kB
JavaScript
"use strict";
const vue = require("vue");
const BodyCell = require("./body-cell");
const _sfc_main = vue.defineComponent({
name: "BodyRow",
components: { BodyCell },
props: {
/** 主体列配置 */
bodyCols: {
type: Array,
required: true
},
/** 表格主体列宽 */
colSizes: {
type: Array,
required: true
},
/** 当前行索引 */
rowIndex: {
type: Number,
required: true
},
/** 当前行对象 */
rowItem: {
type: Object,
required: true
},
/** 当前行数据唯一值 */
rowId: [String, Number],
/** 表格多选选中的值 */
checkedRowKeys: Set,
/** 单元格类名自定义 */
bodyCellClass: [String, Function],
/** 单元格样式自定义 */
bodyCellStyle: [Object, Function],
/** 单元格合并行列方法 */
spanMethod: Function,
/** 溢出提示组件全局属性 */
tableTooltipProps: [Boolean, Object],
/** 序号列起始编号 */
pageIndex: Number,
/** 表格行高 */
rowHeight: Number,
/** 表格尺寸 */
tableSize: String,
/** 树表格展开图标的列 */
expandColumnKey: String,
/** 表格展开行的值 */
expandedRowKeys: Array,
/** 树表格是否懒加载子级 */
lazy: Boolean,
/** 树表格懒加载方法 */
load: Function,
/** 树表格行数据缩进级别 */
level: Number,
/** 树表格每一级行缩进大小 */
indent: Number,
/** 是否需要固定单元格高度 */
fixedCellHeight: Boolean,
/** 表格是否是自适应行高 */
autoRowHeight: Boolean
},
emits: {
/** 多选框选中改变事件 */
cellCheckedChange: (_row, _checked) => true,
/** 展开状态改变事件 */
cellExpandChange: (_row, _expanded, _children) => true,
/** 单元格点击事件 */
cellClick: (_row, _col, _e) => true,
/** 单元格双击事件 */
cellDblclick: (_row, _col, _e) => true,
/** 单元格右键事件 */
cellContextmenu: (_row, _col, _e) => true,
/** 单元格鼠标移入事件 */
cellMouseenter: (_row, _col, _e) => true,
/** 单元格鼠标移出事件 */
cellMouseleave: (_row, _col, _e) => true
},
setup(props, { emit }) {
const loading = vue.ref(false);
const isChecked = vue.computed(() => {
if (!props.checkedRowKeys || props.rowId == null) {
return false;
}
return props.checkedRowKeys.has(props.rowId);
});
const hasChildren = vue.computed(() => {
if (props.rowItem) {
if (props.rowItem.children) {
return !!props.rowItem.children.length;
}
if (props.lazy && props.rowItem.hasChildren) {
return true;
}
}
return false;
});
const rowIndent = vue.computed(() => {
if (!props.level || !props.indent) {
return;
}
return props.level * props.indent + "px";
});
const isCollapse = vue.computed(() => {
if (!props.expandedRowKeys || props.rowId == null) {
return true;
}
return !props.expandedRowKeys.includes(props.rowId);
});
const handleCellCheckedChange = (checked) => {
emit("cellCheckedChange", props.rowItem, checked);
};
const handleCellExpandChange = (expanded) => {
if (expanded && props.lazy && !props.rowItem.children) {
if (props.load) {
loading.value = true;
props.load(props.rowItem.rowData, null, (data) => {
loading.value = false;
emit("cellExpandChange", props.rowItem, expanded, data);
});
}
return;
}
emit("cellExpandChange", props.rowItem, expanded);
};
const handleCellClick = (col, e) => {
emit("cellClick", props.rowItem, col, e);
};
const handleCellDblclick = (col, e) => {
emit("cellDblclick", props.rowItem, col, e);
};
const handleCellContextmenu = (col, e) => {
emit("cellContextmenu", props.rowItem, col, e);
};
const handleCellMouseenter = (col, e) => {
emit("cellMouseenter", props.rowItem, col, e);
};
const handleCellMouseleave = (col, e) => {
emit("cellMouseleave", props.rowItem, col, e);
};
return {
loading,
isChecked,
hasChildren,
rowIndent,
isCollapse,
handleCellCheckedChange,
handleCellExpandChange,
handleCellClick,
handleCellDblclick,
handleCellContextmenu,
handleCellMouseenter,
handleCellMouseleave
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_BodyCell = vue.resolveComponent("BodyCell");
return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.bodyCols, (column, columnIndex) => {
return vue.openBlock(), vue.createBlock(_component_BodyCell, {
key: (_ctx.rowId ?? _ctx.rowIndex) + "-" + (column.key ?? columnIndex),
column,
columnIndex,
rowIndex: _ctx.rowIndex,
rowData: _ctx.rowItem.rowData,
colSizes: _ctx.colSizes,
bodyCellClass: _ctx.bodyCellClass,
bodyCellStyle: _ctx.bodyCellStyle,
spanMethod: _ctx.spanMethod,
tableTooltipProps: _ctx.tableTooltipProps,
pageIndex: _ctx.pageIndex,
rowHeight: _ctx.rowHeight,
isChecked: _ctx.isChecked,
isDisabled: _ctx.rowItem.isDisabled,
tableSize: _ctx.tableSize,
expandColumnKey: _ctx.expandColumnKey,
hasChildren: _ctx.hasChildren,
rowIndent: _ctx.rowIndent,
isCollapse: _ctx.isCollapse,
loading: _ctx.loading,
fixedCellHeight: _ctx.fixedCellHeight,
autoRowHeight: _ctx.autoRowHeight,
onCheckedChange: _ctx.handleCellCheckedChange,
onExpandChange: _ctx.handleCellExpandChange,
onClick: _ctx.handleCellClick,
onDblclick: _ctx.handleCellDblclick,
onContextmenu: _ctx.handleCellContextmenu,
onMouseenter: _ctx.handleCellMouseenter,
onMouseleave: _ctx.handleCellMouseleave
}, vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
])
};
})
]), 1032, ["column", "columnIndex", "rowIndex", "rowData", "colSizes", "bodyCellClass", "bodyCellStyle", "spanMethod", "tableTooltipProps", "pageIndex", "rowHeight", "isChecked", "isDisabled", "tableSize", "expandColumnKey", "hasChildren", "rowIndent", "isCollapse", "loading", "fixedCellHeight", "autoRowHeight", "onCheckedChange", "onExpandChange", "onClick", "onDblclick", "onContextmenu", "onMouseenter", "onMouseleave"]);
}), 128);
}
const bodyRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = bodyRow;