yk-element-components-v2
Version:
378 lines (377 loc) • 16.9 kB
JavaScript
import "vue";
const w = {
props: {
scopedSlots: {
type: Array,
default: () => []
},
align: {
type: String,
default: "left"
},
more: {
type: Array,
default: () => []
},
trigger: {
type: String,
default: "hover"
},
editing: {
type: Boolean,
default: !1
},
orEdit: {
type: Boolean,
default: !1
}
},
data() {
return {};
},
render(e) {
const t = this.scopedSlots.filter((o) => o.context), a = t.slice(0, this.orEdit ? this.editing ? 1 : 2 : 3), n = t.slice(this.orEdit ? this.editing ? 1 : 2 : 3, t.length), u = () => this.more.length === 0 ? e("el-button", {
attrs: {
size: "small",
type: "text"
}
}, [e("i", {
class: "el-icon-more"
})]) : this.more;
return e("div", [e("div", [a.map((o, h) => o), n.length > 0 ? e("el-dropdown", {
style: "margin-left: 10px",
attrs: {
trigger: this.trigger
}
}, [e("span", {
class: "el-dropdown-link"
}, [u()]), e("el-dropdown-menu", {
slot: "dropdown"
}, [e("div", {
class: "dropdownBox"
}, [n.map((o) => e("div", {
class: ["dropdownItem", this.align]
}, [o]))])])]) : ""])]);
}
};
function O(e, t, a, n, u, o, h, r) {
var s = typeof e == "function" ? e.options : e;
t && (s.render = t, s.staticRenderFns = a, s._compiled = !0), n && (s.functional = !0), o && (s._scopeId = "data-v-" + o);
var l;
if (h ? (l = function(d) {
d = d || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !d && typeof __VUE_SSR_CONTEXT__ < "u" && (d = __VUE_SSR_CONTEXT__), u && u.call(this, d), d && d._registeredComponents && d._registeredComponents.add(h);
}, s._ssrRegister = l) : u && (l = r ? function() {
u.call(
this,
(s.functional ? this.parent : this).$root.$options.shadowRoot
);
} : u), l)
if (s.functional) {
s._injectStyles = l;
var c = s.render;
s.render = function(p, f) {
return l.call(f), c(p, f);
};
} else {
var i = s.beforeCreate;
s.beforeCreate = i ? [].concat(i, l) : [l];
}
return {
exports: e,
options: s
};
}
const _ = {
name: "yk-table",
model: {
prop: "editRowIndex",
event: "editRowIndexChange"
},
computed: {
tableOptions() {
return this.options.forEach((e) => {
e.headerSlot && (e.headerName = "header");
}), this.options.filter((e) => !e.action && !e.selection);
},
actionOptions() {
return this.options.find((e) => e.action);
},
selectOptions() {
return this.options.find((e) => e.selection);
},
currentPage: {
get() {
return Number(this.page);
},
set(e) {
this.$emit("update:page", e);
}
},
pageSize: {
get() {
return this.limit;
},
set(e) {
this.$emit("update:limit", e);
}
}
},
props: {
page: {
type: [Number, String],
default: 1
},
limit: {
type: Number,
default: 20
},
options: {
type: Array,
required: !0
},
data: {
type: Array,
required: !0
},
isLoading: {
type: Boolean,
default: !1
},
elementLoadingText: {
type: String
},
elementLoadingSpinner: {
type: String
},
elementLoadingBackground: {
type: String
},
elementLoadingSvg: {
type: String
},
elementLoadingSvgViewBox: {
type: String
},
orEdit: {
type: Boolean,
default: !1
},
editRowIndex: {
type: String,
default: ""
},
pagination: {
type: Boolean,
default: !1
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40]
},
total: {
type: Number,
default: 0
},
paginationAlign: {
type: String,
default: "left"
},
operateDropAlign: {
type: String,
default: "left"
},
trigger: {
type: String,
default: "hover"
},
rowKey: {
type: String,
default: ""
},
treeProps: {
type: Object,
default: () => {
}
},
lazy: {
type: Boolean,
default: !1
},
load: {
type: Function,
default: null
},
spanMethod: Function,
defaultEdit: {
type: Boolean,
default: !1
},
defaultSort: {
type: Object,
default: () => ({})
},
sortChange: {
type: Function,
default: () => {
}
}
},
components: {
vnode: w
},
watch: {
data: {
handler: function() {
this.tableInit();
},
deep: !0
}
},
data() {
return {
currentEdit: "",
tableData: [],
tableObj: {}
};
},
created() {
},
mounted() {
this.tableInit();
},
methods: {
clearFilter(e) {
this.$refs.elTable.clearFilter(e);
},
sortMethod(e, t, a) {
if (a.sortable && a.sortMethod)
return a.sortMethod(e, t, a);
},
tableChildOptions(e) {
return e.forEach((t) => {
t.headerSlot && (t.headerName = "header");
}), e.filter((t) => !t.action && !t.selection);
},
objectSpanMethod({ row: e, column: t, rowIndex: a, columnIndex: n }) {
if (this.spanMethod)
return this.spanMethod({ row: e, column: t, rowIndex: a, columnIndex: n });
},
tableInit() {
let e = this.data;
e.map((t, a) => {
t.rowEdit = t.rowEdit ? t.rowEdit : this.defaultEdit;
let n = JSON.parse(JSON.stringify(t));
this.$set(this.tableObj, a, n);
}), this.tableData = e;
},
paginationChange(e, t) {
this.$emit("pagination", e);
},
handleSelectionChange(e) {
this.$emit("selection-change", e);
},
handleAll(e) {
this.$emit("select-all", e);
},
toggleRowSelection(e) {
this.$refs.elTable.toggleRowSelection(e);
},
clearSelection() {
this.$refs.elTable.clearSelection();
},
rowEditFun(e, t) {
let a = JSON.parse(JSON.stringify(e));
this.$set(this.tableObj, t, a), e.rowEdit = !0;
let n = JSON.parse(JSON.stringify(e));
this.$set(this.tableData, t, n), this.$emit("edit", e, t);
},
confirm(e, t) {
for (let a in e)
e[a] = this.tableObj[t][a];
e.rowEdit = !1, this.$nextTick(() => {
this.tableObj[t] = {};
}), this.$emit("confirm", e, t);
},
cancel(e, t) {
e.rowEdit = !1, this.$nextTick(() => {
this.tableObj[t] = {}, this.$emit("cancel", e, t);
});
},
rowClick(e, t) {
this.$emit("rowClick", e, t);
}
}
};
var y = function() {
var t = this, a = t._self._c;
return a("div", { staticClass: "custom_yk_table" }, [t._t("utils"), a("el-table", t._b({ directives: [{ name: "loading", rawName: "v-loading", value: t.isLoading, expression: "isLoading" }], ref: "elTable", attrs: { data: t.tableData, "element-loading-text": t.elementLoadingText, "element-loading-spinner": t.elementLoadingSpinner, "element-loading-background": t.elementLoadingBackground, "element-loading-svg": t.elementLoadingSvg, "element-loading-svg-view-box": t.elementLoadingSvgViewBox, "tree-props": t.treeProps, "row-key": t.rowKey, lazy: t.lazy, load: t.load, "span-method": t.objectSpanMethod, "default-sort": t.defaultSort }, on: { "row-click": t.rowClick, "selection-change": t.handleSelectionChange, "select-all": t.handleAll, "sort-change": t.sortChange } }, "el-table", t.$attrs, !1), [t.selectOptions && t.selectOptions.selection ? a("el-table-column", { attrs: { type: "selection", align: t.selectOptions.align ? t.selectOptions.align : "left", width: t.selectOptions.width ? t.selectOptions.width : "", "min-width": t.selectOptions.minWidth ? t.selectOptions.minWidth : "", fixed: t.selectOptions.fixed, selectable: t.selectOptions.selectable, "reserve-selection": t.selectOptions.reserveSelection } }) : t._e(), t._l(t.tableOptions, function(n, u) {
return a("el-table-column", { key: u, attrs: { label: n.label, prop: n.prop, align: n.align ? n.align : "left", width: n.width, fixed: n.fixed, sortable: n.sortable, "sort-method": n.sortMethod ? (o, h) => t.sortMethod(o, h, n) : null, "sort-by": n.sortBy || null, "min-width": n.minWidth ? n.minWidth : "", "show-overflow-tooltip": n.showOverflowTooltip, "column-key": n.prop, filters: n.filters, "filter-method": n.filterMethod ? (o, h, r) => n.filterMethod(o, h, r) : null }, scopedSlots: t._u([{ key: n.headerName, fn: function(o) {
return n.headerSlot ? [t._t(n.headerSlot, null, { scope: o })] : void 0;
} }, { key: "default", fn: function(o) {
return !n.childrenOptions || n.childrenOptions.length == 0 ? [o.row.rowEdit && n.editable && t.orEdit ? [n.customEditSlot ? t._t(n.customEditSlot, null, { scope: t.tableObj[o.$index] }) : a("el-input", { attrs: { size: "small" }, model: { value: t.tableObj[o.$index][n.prop], callback: function(h) {
t.$set(t.tableObj[o.$index], n.prop, h);
}, expression: "tableObj[scope.$index][item.prop]" } })] : [n.slot ? t._t(n.slot, null, { scope: o }) : a("span", [t._v(t._s(o.row[n.prop]))])]] : void 0;
} }], null, !0) }, [n.childrenOptions && n.childrenOptions.length > 0 ? [t._l(t.tableChildOptions(n.childrenOptions), function(o, h) {
return a("el-table-column", { key: h, attrs: { label: o.label, prop: o.prop, align: o.align ? o.align : "left", width: o.width, fixed: o.fixed, sortable: o.sortable, "sort-method": o.sortMethod ? (r, s) => t.sortMethod(r, s, o) : null, "sort-by": o.sortBy || null, "min-width": o.minWidth ? o.minWidth : "", "show-overflow-tooltip": o.showOverflowTooltip, "column-key": o.prop, filters: o.filters, "filter-method": o.filterMethod ? (r, s, l) => o.filterMethod(r, s, l) : null }, scopedSlots: t._u([{ key: o.headerName, fn: function(r) {
return o.headerSlot ? [t._t(o.headerSlot, null, { scope: r })] : void 0;
} }, { key: "default", fn: function(r) {
return !o.childrenOptions || o.childrenOptions.length == 0 ? [r.row.rowEdit && o.editable && t.orEdit ? [o.customEditSlot ? t._t(o.customEditSlot, null, { scope: t.tableObj[r.$index] }) : a("el-input", { attrs: { size: "small" }, model: { value: t.tableObj[r.$index][o.prop], callback: function(s) {
t.$set(t.tableObj[r.$index], o.prop, s);
}, expression: "tableObj[scope.$index][item1.prop]" } })] : [o.slot ? t._t(o.slot, null, { scope: r }) : a("span", [t._v(t._s(r.row[o.prop]))])]] : void 0;
} }], null, !0) }, [o.childrenOptions && o.childrenOptions.length > 0 ? [t._l(t.tableChildOptions(o.childrenOptions), function(r, s) {
return a("el-table-column", { key: s, attrs: { label: r.label, prop: r.prop, align: r.align ? r.align : "left", width: r.width, fixed: r.fixed, sortable: r.sortable, "sort-method": r.sortMethod ? (l, c) => t.sortMethod(l, c, r) : null, "sort-by": r.sortBy || null, "min-width": r.minWidth ? r.minWidth : "", "show-overflow-tooltip": r.showOverflowTooltip, "column-key": r.prop, filters: r.filters, "filter-method": r.filterMethod ? (l, c, i) => r.filterMethod(l, c, i) : null }, scopedSlots: t._u([{ key: r.headerName, fn: function(l) {
return r.headerSlot ? [t._t(r.headerSlot, null, { scope: l })] : void 0;
} }, { key: "default", fn: function(l) {
return !r.childrenOptions || r.childrenOptions.length == 0 ? [l.row.rowEdit && r.editable && t.orEdit ? [r.customEditSlot ? t._t(r.customEditSlot, null, { scope: t.tableObj[l.$index] }) : a("el-input", { attrs: { size: "small" }, model: { value: t.tableObj[l.$index][r.prop], callback: function(c) {
t.$set(t.tableObj[l.$index], r.prop, c);
}, expression: "tableObj[scope.$index][item2.prop]" } })] : [r.slot ? t._t(r.slot, null, { scope: l }) : a("span", [t._v(t._s(l.row[r.prop]))])]] : void 0;
} }], null, !0) }, [r.childrenOptions && r.childrenOptions.length > 0 ? [t._l(t.tableChildOptions(r.childrenOptions), function(l, c) {
return a("el-table-column", { key: c, attrs: { label: l.label, prop: l.prop, align: l.align ? l.align : "left", width: l.width, fixed: l.fixed, sortable: l.sortable, "sort-method": l.sortMethod ? (i, d) => t.sortMethod(i, d, l) : null, "sort-by": l.sortBy || null, "min-width": l.minWidth ? l.minWidth : "", "show-overflow-tooltip": l.showOverflowTooltip, "column-key": l.prop, filters: l.filters, "filter-method": l.filterMethod ? (i, d, p) => l.filterMethod(i, d, p) : null }, scopedSlots: t._u([{ key: l.headerName, fn: function(i) {
return l.headerSlot ? [t._t(l.headerSlot, null, { scope: i })] : void 0;
} }, { key: "default", fn: function(i) {
return !l.childrenOptions || l.childrenOptions.length == 0 ? [i.row.rowEdit && l.editable && t.orEdit ? [l.customEditSlot ? t._t(l.customEditSlot, null, { scope: t.tableObj[i.$index] }) : a("el-input", { attrs: { size: "small" }, model: { value: t.tableObj[i.$index][l.prop], callback: function(d) {
t.$set(t.tableObj[i.$index], l.prop, d);
}, expression: "tableObj[scope.$index][item3.prop]" } })] : [l.slot ? t._t(l.slot, null, { scope: i }) : a("span", [t._v(t._s(i.row[l.prop]))])]] : void 0;
} }], null, !0) }, [l.childrenOptions && l.childrenOptions.length > 0 ? [t._l(t.tableChildOptions(l.childrenOptions), function(i, d) {
return a("el-table-column", { key: d, attrs: { label: i.label, prop: i.prop, align: i.align ? i.align : "left", width: i.width, fixed: i.fixed, sortable: i.sortable, "sort-method": i.sortMethod ? (p, f) => t.sortMethod(p, f, i) : null, "sort-by": i.sortBy || null, "min-width": i.minWidth ? i.minWidth : "", "show-overflow-tooltip": i.showOverflowTooltip, "column-key": i.prop, filters: i.filters, "filter-method": i.filterMethod ? (p, f, b) => i.filterMethod(p, f, b) : null }, scopedSlots: t._u([{ key: i.headerName, fn: function(p) {
return i.headerSlot ? [t._t(i.headerSlot, null, { scope: p })] : void 0;
} }, { key: "default", fn: function(p) {
return [p.row.rowEdit && i.editable && t.orEdit ? [i.customEditSlot ? t._t(i.customEditSlot, null, { scope: t.tableObj[p.$index] }) : a("el-input", { attrs: { size: "small" }, model: { value: t.tableObj[p.$index][i.prop], callback: function(f) {
t.$set(t.tableObj[p.$index], i.prop, f);
}, expression: "tableObj[scope.$index][item4.prop]" } })] : [i.slot ? t._t(i.slot, null, { scope: p }) : a("span", [t._v(t._s(p.row[i.prop]))])]];
} }], null, !0) });
})] : t._e()], 2);
})] : t._e()], 2);
})] : t._e()], 2);
})] : t._e()], 2);
}), t.actionOptions ? a("el-table-column", { attrs: { label: t.actionOptions.label ? t.actionOptions.label : "", align: t.actionOptions.align ? t.actionOptions.align : "left", width: t.actionOptions.width ? t.actionOptions.width : "", "min-width": t.actionOptions.minWidth ? t.actionOptions.minWidth : "", fixed: t.actionOptions.fixed }, scopedSlots: t._u([{ key: "default", fn: function(n) {
return [a("div", { staticClass: "operation" }, [t.orEdit && !n.row.rowEdit ? a("el-button", { staticStyle: { "margin-right": "10px" }, attrs: { type: "text", size: "mini" }, on: { click: function(u) {
return t.rowEditFun(n.row, n.$index);
} } }, [t._v("\u7F16\u8F91")]) : t._e(), t.orEdit && n.row.rowEdit ? a("el-button", { attrs: { type: "text", size: "mini" }, on: { click: function(u) {
return t.confirm(n.row, n.$index);
} } }, [t._v("\u786E\u8BA4")]) : t._e(), t.orEdit && n.row.rowEdit ? a("el-button", { staticStyle: { "margin-right": "10px" }, attrs: { type: "text", size: "mini" }, on: { click: function(u) {
return t.cancel(n.row, n.$index);
} } }, [t._v("\u53D6\u6D88")]) : t._e(), n.row.rowEdit ? a("vnode", { attrs: { orEdit: t.orEdit, editing: n.row.rowEdit, align: t.operateDropAlign, "scoped-slots": t.$scopedSlots.editRow({ scope: n }), more: t.$slots.moreEl, trigger: t.trigger } }) : a("vnode", { attrs: { align: t.operateDropAlign, orEdit: t.orEdit, editing: n.row.rowEdit, "scoped-slots": t.$scopedSlots.action({ scope: n }), more: t.$slots.moreEl, trigger: t.trigger } })], 1)];
} }], null, !1, 3491193154) }) : t._e()], 2), a("yk-pagination", { directives: [{ name: "show", rawName: "v-show", value: t.pagination, expression: "pagination" }], attrs: { total: t.total, page: t.currentPage, limit: t.pageSize, pageSizes: t.pageSizes }, on: { "update:page": function(n) {
t.currentPage = n;
}, "update:limit": function(n) {
t.pageSize = n;
}, pagination: t.paginationChange } })], 2);
}, S = [], v = /* @__PURE__ */ O(
_,
y,
S,
!1,
null,
null,
null,
null
);
const g = v.exports, x = {
install(e) {
e.component(g.name, g);
}
};
export {
x as default
};