<script>
/** * introduction: VxeTable simple table secondary encapsulation * event: TableChange (this event is triggered when paging changes), sortChangeEvent (this function is triggered when sorting), * radioChange (checkbox selection) cellDblclick(table cell double click event) cellClick (row click) checkbox(multiple checkbox trigger) */
export default {
name: "VXETable2".props: {
toggleMethod: {
// This method is called before triggering is expanded or turned off, and can return a value to determine whether execution is allowed to continue
type: Function,},columns: {
// Table header data
type: Array.default: () = >[],},autoResize: {
// Automatically listens for changes in the parent element to recalculate the table
type: Boolean.default: true,},border: {
// Whether to add a border
type: Boolean.default: true,},rowKey: {
// Whether you need to set the key property for each row of VNode (not necessary for special cases)
type: Boolean.default: true,},resizable: {
// Whether all columns are allowed to drag column width to resize
type: Boolean.default: true,},showOverflow: {
// Set all contents to ellipsis when too long (recommended for fixed columns to improve rendering speed)
type: Boolean.default: true,},highlightHoverRow: {
// If the mouse moves over the row to highlight it
type: Boolean.default: true,},height: {
// Table height; Supports full parent or fixed height, if auto is set to full parent (if auto is set to make sure there is a parent and no adjacent elements are allowed)
type: [String.Number].default: "auto",},maxHeight: {
// The maximum height of the table
type: String.//%, px
default: "",},align: {
// Align all columns left, center, right
type: String.default: "center",},rowHeight: {
/ / line height
type: String.default: "",},rowStyle: {
/ / line style
type: [String.Object.Function],},containerHeight: {
// Height of the parent box
type: String.default: "100%",},containerMaxHeight: { type: String.default: "" }, // Maximum height of the parent box
containerMinHeight: { type: String.default: "" }, // The minimum height of the parent box
pager: {
// Turn on paging
type: Boolean.default: false,},currentPage: {
/ / the current page
type: Number.default: 1,},pageSize: {
// Size per page
type: Number.default: 5,},pageSizes: {
// List of page size options
type: Array.default: () = > [50.100.150],},total: {
/ / the total number of article
type: Number.default: 0,},sortMethod: {
// Whether to enable custom sort
type: Boolean.default: false,},checkField: {
// Select fields for each row
type: String.default: "pitch",},autoHidden: {
// Automatically hide when there is only one page
type: Boolean.default: false,},// Whether to display the all-select button (default false if checkStrictly=true)
showHeader: {
type: Boolean.default: true,},checkMethod: Function.The return value of this method is used to determine whether the row checkbox can be checked
},
render(h) {
// tooltip-config={{ showAll: true }}
return (
// containerMaxHeight
// containerMinHeight
<div>
<div
style={{
height: this.containerHeight.width: "100% ",maxHeight: this.containerMaxHeight.minHeight: this.containerMinHeight,}} >
<vxe-table
scroll-y={{ enabled: true.gt: 0 }}
row-style={this.rowStyle}
ref="xTable"
row-config={{ height: this.rowHeight }}
border={this.border}
auto-resize={this.autoResize}
row-key={this.rowKey}
resizable={this.resizable}
show-overflow={this.showOverflow}
highlight-hover-row={this.highlightHoverRow}
align={this.align}
height={this.height}
max-height={this.maxHeight}
expand-config={{
trigger: "cell",
showIcon: false.accordion: true.toggleMethod: this.toggleMethod,}}resizable-config={{ minWidth: 10 }}
radio-config={{ trigger: "row"}}checkbox-config={{
checkField: this.checkField.trigger: "row",
checkMethod: this.checkMethod.showHeader: this.showHeader,}}onSort-change={this.sortChangeEvent}
sort-config={{
remote: this.sortMethod.trigger: "cell",
orders: ["asc","desc","default"].}}clear-sort={this.clearSort}
onCell-click={this.cellClick}
onCell-dblclick={this.onCellDblclick}
onCheckbox-change={this.checkbox}
onCheckbox-all={this.checkbox}
onRadio-change={this.radioChange}
>
{this.columns.map((item, index) => {
return item.type === "checkbox" ||
item.type === "radio" ||
item.type === "seq"
? this.vxeTableChechboxRadio(item, index)
: item.type === "expand"
? this.vxeTableExpand(item, index)
: this.vxeTable(item, index);
})}
</vxe-table>
</div>{this.pager ? (// turn on paging<vxe-pager
perfect
size="mini"
current-page={this.currentPage}
page-size={this.pageSize}
page-sizes={this.pageSizes}
total={this.total}
auto-hidden={this.autoHidden}
layouts={[
"PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total",]}onPage-change={(event)= > this.pageChange(event)}
/>
) : (
""
)}
</div>
);
},
methods: {
/ / hide the column
getColumnByField(field) {
// this.$emit("cellClick", e);
if(! field){return
}
// console.log(" Hide column ",field)
this.$refs.xTable.hideColumn(this.$refs.xTable.getColumnByField(field));
// return
},
/ / click on the line
cellClick(e) {
this.$emit("cellClick", e);
},
// Table cell double-click event
onCellDblclick(e) {
this.$emit("cellDblclick", e);
},
// Get the columns of the current table (all the collected columns, all the table headers, all the table headers after the processing condition, and the table headers in the current rendering
getTableColumn() {
return this.$refs.xTable.getTableColumn();
},
// Get the table's visual columns
getColumns() {
return this.$refs.xTable.getColumns();
},
// Refresh column configuration (may be used for dynamically changing properties, show/hide columns, etc.)
refreshColumn() {
this.$refs.xTable.refreshColumn();
},
// recalculate the table
recalculate(is = true) {
this.$refs.xTable.recalculate(is);
this.refreshColumn();
},
// Load data and clear all state (this may be used in scenarios where table data needs to be overloaded and partially incremented)
reloadData(data) {
if (!Array.isArray(data)) data = [];
this.$refs.xTable.reloadData(data);
},
// Handle data manually (for manual changes to sort, filter... May be used when the data needs to be reprocessed.)
updateData(data) {
if (!Array.isArray(data)) data = [];
this.$refs.xTable.updateData(data);
},
// Load data (for table data overload, may be used in local increment scenarios)
loadData(data) {
if (!Array.isArray(data)) data = [];
this.$refs.xTable.loadData(data);
},
// This event is triggered when paging changes
pageChange(e) {
this.$emit("tableChange", e);
},
// The functions triggered by sorting are "desc" descending, "ASc" ascending, and "default"
sortChangeEvent(e) {
this.$emit("sortChangeEvent", e);
},
// Decompose the field
itemField(row, field) {
letfield_zd = field? .split(".");
if (Array.isArray(field_zd) && field_zd? .length >1) {
// Render an empty string if there is no object data
if(! row[field_zd[0]]) {
return "";
}
return row[field_zd[0]][field_zd[1]];
}
return row[field];
},
// Multiple checkbox triggers
checkbox(e) {
this.$emit("checkbox", e);
},
// Select a single box
radioChange(e) {
this.$emit("radioChange", e);
},
/ / rendering vxe - column type = checkbox | radio | xuhao
vxeTableChechboxRadio(item, index) {
return (
<vxe-column
key={index}
type={item.type}
sortable={item.sortable}// Whether to enable sortingtitle={item.title}/ / column headingswidth={item.width}/ / column widthpx%,number | string
min-width={item.minWidth}// Minimum column width; The remaining space will be allocated proportionally automaticallynumber | string px%,fixed={item.fixed}// Attach columns to the left or right (note: columns should be placed on the left and right sides)left(Fix left side),right(Fixed right side) />
);
},
// Render open line processing
vxeTableExpand(item, index) {
console.log(item);
return (
<vxe-column
key={index}
type={item.type}
sortable={item.sortable}// Whether to enable sortingtitle={item.title}/ / column headingswidth={item.width}/ / column widthpx%,number | string
min-width={item.minWidth}// Minimum column width; The remaining space will be allocated proportionally automaticallynumber | string px%,fixed={item.fixed}// Attach columns to the left or right (note: columns should be placed on the left and right sides)left(Fix left side),right(Fix right side)scopedSlots={{// Display slotsdefault: (posrt) = >{ let field = item.field ? this.filterField(item.field) : ""; Return h("span", this.$scopedSlots[field]. this.$scopedSlots[field]({ row: posrt.row, rowIndex: posrt.$rowIndex, }) : $scopedSlots["default"] this.$scopedSlots["default"] this.$scopedSlots["default"]({ row: posrt.row, rowIndex: posrt.$rowIndex, field: item.field, text: ItemField (posrt.row, item.field),}) : this.itemField(posrt.row, item.field) // Render normal data); }, content: $scopedSlots["content"] return h("div", this.$scopedSlots["content"]); this.$scopedSlots["content"]({ row: posrt.row, rowIndex: posrt.$rowIndex, field: item.field, text: ItemField (posrt.row, item.field),}) : this.itemField(posrt.row, item.field) // Render normal data); }}} / >
);
},
// Render the normal vxe-column
vxeTable(item, index) {
// console.log(item);
return (
<vxe-column
key={index}
title={item.title}/ / column headingsfield={item.field}// Column field namewidth={item.width}/ / column widthpx%,number | string
min-width={item.minWidth}// Minimum column width; The remaining space will be allocated proportionally automaticallynumber | string px%,fixed={item.fixed}// Attach columns to the left or right (note: columns should be placed on the left and right sides)left(Fix left side),right(Fix right side)sortable={item.sortable}// Whether to enable sortingsort-type={item.sortType}// Sort the field type, such as string to value, etcauto.number.string
align={item.align ? item.align : this.align} / /left(left aligned),center(center aligned),right(Right aligned)scopedSlots={{
default: (posrt) = >{// Row row data // rowIndex index // console.log(this.$scopedSlots); // console.log(item.field); let field = item.field ? this.filterField(item.field) : ""; let text = this.itemField(posrt.row, item.field); // console.log(this.$scopedSlots[field], field); Return h("span", this.$scopedSlots[field]. this.$scopedSlots[field]({ row: posrt.row, rowIndex: posrt.$rowIndex, field: item.field, text, }) : $scopedSlots["default"] this.$scopedSlots["default"] this.$scopedSlots["default"]({ row: posrt.row, rowIndex: posrt.$rowIndex, field: item.field, text, }) : Text // Render normal data); }}} / >
);
},
// Split multiple fields
filterField(field) {
letfield_zd = field? .split(".");
returnfield_zd? .length ===1 ? field_zd[0] : field_zd[1]; ,}}}; </script>Copy the code