@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
198 lines (197 loc) • 6.86 kB
JavaScript
import { defineComponent, h, reactive, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { DownArrow } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const RenderColumn = defineComponent({
setup(props) {
return () => h(`view`, {}, props.slots[0] ? props.slots[0](props.record) : props.slots[1](props.record));
},
props: {
slots: Array,
record: Object
}
});
const { componentName, create, translate } = createComponent("table");
const _sfc_main = create({
components: {
RenderColumn,
DownArrow
},
props: {
bordered: {
type: Boolean,
default: true
},
columns: {
type: Array,
default: () => {
return [];
}
},
data: {
type: Object,
default: () => {
return {};
}
},
summary: {
type: Function,
default: null
},
striped: {
type: Boolean,
default: false
}
},
emits: ["sorter"],
setup(props, { emit, slots }) {
const state = reactive({
curData: props.data
});
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const cellClasses = (item) => {
return {
"cqmc-table__main__head__tr--border": props.bordered,
[`cqmc-table__main__head__tr--align${item.align ? item.align : ""}`]: true
};
};
const stylehead = (item) => {
return item.stylehead ? item.stylehead : "";
};
const stylecolumn = (item) => {
return item.stylecolumn ? item.stylecolumn : "";
};
const getColumnItem = (value) => {
return props.columns.filter((item) => item.key === value)[0];
};
const getColumnItemStyle = (value) => {
const style = props.columns.filter((item) => item.key === value);
return style[0].stylecolumn ? style[0].stylecolumn : "";
};
const handleSorterClick = (item) => {
if (item.sorter) {
emit("sorter", item);
state.curData = typeof item.sorter === "function" ? state.curData.sort(item.sorter) : item.sorter === "default" ? state.curData.sort() : state.curData;
}
};
const sortDataItem = () => {
return props.columns.map((columns) => {
return [columns.key, columns.render];
});
};
watch(
() => props.data,
(val) => {
state.curData = val.slice();
}
);
return {
...toRefs(state),
classes,
cellClasses,
getColumnItem,
getColumnItemStyle,
handleSorterClick,
sortDataItem,
translate,
stylehead,
stylecolumn
};
}
});
const _hoisted_1 = { class: "cqmc-table__main__head" };
const _hoisted_2 = { class: "cqmc-table__main__head__tr" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { class: "cqmc-table__main__body" };
const _hoisted_5 = { key: 1 };
const _hoisted_6 = {
key: 0,
class: "cqmc-table__nodata"
};
const _hoisted_7 = {
key: 0,
class: "cqmc-table__nodata__text"
};
const _hoisted_8 = {
key: 1,
class: "cqmc-table__summary"
};
const _hoisted_9 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DownArrow = resolveComponent("DownArrow");
const _component_RenderColumn = resolveComponent("RenderColumn");
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes)
}, [
createElementVNode("view", {
class: normalizeClass(["cqmc-table__main", { "cqmc-table__main--striped": _ctx.striped }])
}, [
createElementVNode("view", _hoisted_1, [
createElementVNode("view", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (item) => {
return openBlock(), createElementBlock("span", {
class: normalizeClass(["cqmc-table__main__head__tr__th", _ctx.cellClasses(item)]),
key: item.key,
onClick: ($event) => _ctx.handleSorterClick(item),
style: normalizeStyle(item.stylehead)
}, [
createTextVNode(toDisplayString(item.title) + " ", 1),
renderSlot(_ctx.$slots, "icon"),
!_ctx.$slots.icon && item.sorter ? (openBlock(), createBlock(_component_DownArrow, {
key: 0,
width: "12px",
height: "12px"
})) : createCommentVNode("", true)
], 14, _hoisted_3);
}), 128))
])
]),
createElementVNode("view", _hoisted_4, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.curData, (item) => {
return openBlock(), createElementBlock("view", {
class: "cqmc-table__main__body__tr",
key: item
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortDataItem(), ([value, render]) => {
return openBlock(), createElementBlock("span", {
class: normalizeClass(["cqmc-table__main__body__tr__td", _ctx.cellClasses(_ctx.getColumnItem(value))]),
key: value,
style: normalizeStyle(_ctx.getColumnItemStyle(value))
}, [
typeof item[value] === "function" || typeof render === "function" ? (openBlock(), createBlock(_component_RenderColumn, {
key: 0,
slots: [render, item[value]],
record: item
}, null, 8, ["slots", "record"])) : (openBlock(), createElementBlock("view", _hoisted_5, toDisplayString(item[value]), 1))
], 6);
}), 128))
]);
}), 128))
])
], 2),
!_ctx.curData.length ? (openBlock(), createElementBlock("view", _hoisted_6, [
createElementVNode("div", {
class: normalizeClass(["cqmc-table__nodata", { "cqmc-table__nodata--border": _ctx.bordered }])
}, [
renderSlot(_ctx.$slots, "nodata"),
!_ctx.$slots.nodata ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.translate("noData")), 1)) : createCommentVNode("", true)
], 2)
])) : createCommentVNode("", true),
_ctx.summary ? (openBlock(), createElementBlock("view", _hoisted_8, [
createElementVNode("span", {
class: "cqmc-table__summary__text",
innerHTML: _ctx.summary().value
}, null, 8, _hoisted_9)
])) : createCommentVNode("", true)
], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};