yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
261 lines (260 loc) • 9.09 kB
JavaScript
;
const vue = require("vue");
const util = require("../util");
const CellCheckbox = require("./cell-checkbox");
const CellFilter = require("./cell-filter");
const _sfc_main = vue.defineComponent({
name: "HeaderCell",
components: { CellCheckbox, CellFilter, CellRender: util.CellRender },
props: {
/** 当前列配置 */
column: Object,
/** 当前列索引 */
columnIndex: Number,
/** 当前行索引 */
headerIndex: Number,
/** 当前列宽 */
colSize: Object,
/** 表格排序状态 */
sortBy: Object,
/** 表格当前筛选值 */
filterValue: Object,
/** 表格是否是全选状态 */
isCheckAll: Boolean,
/** 表格是否是半选状态 */
isIndeterminate: Boolean,
/** 是否禁用表头选择框 */
disabledCheckbox: Boolean,
/** 表格尺寸 */
tableSize: String,
/** 单元格类名自定义 */
headerCellClass: [String, Function],
/** 单元格样式自定义 */
headerCellStyle: [Object, Function],
/** 表头单元格是否溢出省略 */
headerEllipsis: Boolean,
/** 表格行高 */
rowHeight: Number
},
emits: {
/** 多选框选中改变事件 */
checkedChange: (_checked) => true,
/** 列筛选改变事件 */
filterChange: (_params) => true,
/** 点击事件 */
click: (_col, _e) => true,
/** 右键事件 */
contextmenu: (_col, _e) => true,
/** 鼠标移入事件 */
mouseenter: (_col, _e) => true
},
setup(props, { emit, slots }) {
const originalCol = vue.computed(() => {
return props.column ? props.column.originalCol : void 0;
});
const cellParam = vue.computed(() => {
return {
column: originalCol.value,
columnIndex: props.columnIndex,
rowIndex: props.headerIndex
};
});
const cellClass = vue.computed(() => {
const classes = ["el-table-v2__header-cell", "ele-table-td"];
if (props.column) {
if (!props.column.colspan) {
classes.push("is-none");
} else if (props.column.colspan > 1) {
classes.push("is-multi-cell");
}
if (!props.column.rowspan) {
classes.push("is-placeholder");
} else if (props.column.rowspan > 1) {
classes.push("is-multi-row");
}
}
const col = originalCol.value;
if (col) {
const align = col.headerAlign || col.align;
if (align) {
classes.push("is-align-" + align);
}
if (col.sortable === true || col.sortable === "custom") {
classes.push("is-sortable");
}
if (props.sortBy != null && util.getColKey(col) === props.sortBy.key) {
const sortClass = util.getOrderValue(props.sortBy.order);
if (sortClass) {
classes.push("is-" + sortClass);
}
}
if (col.filters && col.filters.length && props.filterValue && props.filterValue.length) {
classes.push("is-filtered");
}
if (col.type === "selection") {
classes.push("is-selection");
}
if (col.type === "expand") {
classes.push("is-expand");
}
if (props.headerEllipsis) {
classes.push("is-ellipsis");
}
if (col.fixed === "right") {
classes.push("is-fixed-right");
} else if (col.fixed === "left" || col.fixed === true) {
classes.push("is-fixed-left");
}
if (props.column) {
if (props.column.isFixedLeftLast) {
classes.push("is-fixed-left-last");
}
if (props.column.isFixedRightFirst) {
classes.push("is-fixed-right-first");
}
}
if (typeof props.headerCellClass === "function") {
const temp = props.headerCellClass(cellParam.value);
if (temp) {
classes.push(temp);
}
} else if (props.headerCellClass) {
classes.push(props.headerCellClass);
}
if (col.labelClassName) {
classes.push(col.labelClassName);
}
}
return classes.join(" ");
});
const cellHeight = vue.computed(() => {
if (props.rowHeight == null || props.column == null || !props.column.rowspan || props.column.rowspan <= 1) {
return;
}
return props.column.rowspan * props.rowHeight + "px";
});
const cellStyle = vue.computed(() => {
if (!props.colSize) {
return;
}
const { width, fixedLeft, fixedRight } = props.colSize;
const userStyle = props.headerCellStyle;
const param = cellParam.value;
return [
{
width: width + "px",
height: cellHeight.value,
left: fixedLeft,
right: fixedRight
},
(typeof userStyle === "function" ? userStyle(param) : userStyle) || {}
];
});
const cellTitle = vue.computed(() => {
return originalCol.value ? originalCol.value.label : void 0;
});
const renderOpt = vue.computed(() => {
const col = originalCol.value;
if (col) {
const param = { column: col, $index: props.columnIndex };
if (col.headerSlot) {
const headerSlot = slots[col.headerSlot];
if (typeof headerSlot === "function") {
return { render: headerSlot, params: [param] };
}
}
if (typeof col.renderHeader === "function") {
return { render: col.renderHeader, params: [param] };
}
}
return {};
});
const handleCheckedChange = (checked) => {
emit("checkedChange", checked);
};
const handleFilterChange = (value) => {
emit("filterChange", { column: originalCol.value, value });
};
const handleClick = (e) => {
emit("click", originalCol.value, e);
};
const handleContextmenu = (e) => {
emit("contextmenu", originalCol.value, e);
};
const handleMouseenter = (e) => {
emit("mouseenter", originalCol.value, e);
};
return {
originalCol,
cellClass,
cellStyle,
cellTitle,
renderOpt,
handleCheckedChange,
handleFilterChange,
handleClick,
handleContextmenu,
handleMouseenter
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = {
key: 0,
class: "ele-table-cell"
};
const _hoisted_2 = ["title"];
const _hoisted_3 = {
key: 0,
class: "ele-table-sorter"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CellCheckbox = vue.resolveComponent("CellCheckbox");
const _component_CellRender = vue.resolveComponent("CellRender");
const _component_CellFilter = vue.resolveComponent("CellFilter");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(_ctx.cellClass),
style: vue.normalizeStyle(_ctx.cellStyle),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
onContextmenu: _cache[1] || (_cache[1] = (...args) => _ctx.handleContextmenu && _ctx.handleContextmenu(...args)),
onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleMouseenter && _ctx.handleMouseenter(...args))
}, [
_ctx.originalCol ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", {
class: "ele-cell-title",
title: _ctx.headerEllipsis ? _ctx.cellTitle : void 0
}, [
_ctx.originalCol.type === "selection" ? (vue.openBlock(), vue.createBlock(_component_CellCheckbox, {
key: 0,
checked: _ctx.isCheckAll,
indeterminate: _ctx.isIndeterminate,
disabled: _ctx.disabledCheckbox,
size: _ctx.tableSize,
onChange: _ctx.handleCheckedChange
}, null, 8, ["checked", "indeterminate", "disabled", "size", "onChange"])) : (vue.openBlock(), vue.createBlock(_component_CellRender, vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.renderOpt)), {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.cellTitle), 1)
]),
_: 1
}, 16))
], 8, _hoisted_2),
_ctx.originalCol.sortable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3)) : vue.createCommentVNode("", true),
_ctx.originalCol.filters && _ctx.originalCol.filters.length ? (vue.openBlock(), vue.createBlock(_component_CellFilter, {
key: 1,
filtered: _ctx.filterValue,
filterMultiple: _ctx.originalCol.filterMultiple,
filters: _ctx.originalCol.filters,
filterPlacement: _ctx.originalCol.filterPlacement,
onChange: _ctx.handleFilterChange
}, null, 8, ["filtered", "filterMultiple", "filters", "filterPlacement", "onChange"])) : vue.createCommentVNode("", true)
])) : vue.createCommentVNode("", true)
], 38);
}
const headerCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = headerCell;