An editable form ry-edit-table based on Vue3.0 and Element Plus secondary packaging that supports multi-line editing, lightweight, simple and practical.
Support:
- Supports multi-line editing of active tables.
- Through the table configuration attribute
listConfig, the component can render the corresponding table header. - The input box type and validation rules of the corresponding column can be set through the table configuration attribute
listConfig. - Through the table configuration attribute
listConfig, you can quickly handle thechange,blur,focusevents or The state of the input box. - Through the in-line button configuration attribute
listConfig, the component can render the related buttons, and the related click events and button states can be processed in the configuration attributes. - Provide relevant methods to support functions such as single-row verification, multi-row verification, dynamic adjustment of verification rules, clear verification, and obtaining final form data.
Not supported:
- All complex structures such as header merging and row merging.
Quick start:
Install
npm i ry-edit-table
Introduction
import {<!-- --> createApp } from "vue";
import App from "./App.vue";
import "./style.css";
import "element-plus/dist/index.css";
import ElementUI from "element-plus";
import ryEditTable from 'ry-edit-table'; // import table plugin
import 'ry-edit-table/dist/style.css';// import ry-edit-table style
createApp(App)
.use(ElementUI)
.use(ryEditTable)
.mount("#app");
Use
<template>
<div id="DemoPage">
<h1>RY-EDIT-TABLE</h1>
<ry-edit-table
ref="ryEditTable"
:listData="listData"
:listConfig="listConfig"
:rowButtons="rowButtons"
:operationsConfig="{ width: 160 }"
:action="'action'"
:cellStyle="{ color: 'orange' }"
:cellClassName="'custom-cell-class'"
trigger="onChange"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55px" fixed="left" />
<el-table-column type="index" label="serial number" width="100px" fixed="left" />
</ry-edit-table>
</div>
</template>
<script>
export default {<!-- -->
name: "demoPage",
data() {<!-- -->
return {<!-- -->
// pull down resource collection
dropDownOptions: {<!-- -->
job: [],
},
// mock data
list: [
{<!-- -->
name: "Time1",
age: "26",
pkid: 1,
date: "1998-01-30",
job: "0",
job$view: "Athlete",
items$view: "Badminton, swimming",
items: ["0", "3"],
},
{<!-- -->
name: "cherry",
age: "13",
pkid: 2,
date: "1996-01-30",
job: "2",
job$view: "Student",
items$view: "Badminton, swimming",
items: ["0", "3"],
},
{<!-- -->
name: "alex",
age: "28",
pkid: 3,
date: "1992-01-30",
job: "0",
job$view: "Athlete",
items$view: "Badminton, swimming",
items: ["0", "3"],
},
],
// table data
listData: [],
// header configuration
listConfig: [
{<!-- -->
mode: "text",
label: "Name",
prop: "name",
minWidth: "100px",
disabled(row) {<!-- -->
return row.name === "cherry" ? true : false;
},
change: (v, row, index) => {<!-- -->
console.log("v, row, index: ", v, row, index);
},
blur: (v) => {<!-- -->
console.log("name blur");
},
rules: [
{<!-- -->
type: "string",
required: true,
message: "Name cannot be empty",
},
],
},
{<!-- -->
mode: "text",
label: "age",
prop: "age",
minWidth: "100px",
sortable: true,
change: (v, row) => (row. job = v <= 22 ? "2" : ""),
rules: [
{<!-- -->
type: "number",
asyncValidator: (rule, value) => {<!-- -->
return new Promise((resolve, reject) => {<!-- -->
if (value < 1) {<!-- -->
reject("Age needs to be greater than 1 year old");
} else {<!-- -->
resolve();
}
});
},
},
],
},
{<!-- -->
mode: "date",
label: "Date of Birth",
prop: "date",
minWidth: "150px",
inputConfig: {<!-- -->
"value-format": "YYYY-MM-DD",
},
rules: [
{<!-- -->
type: "date",
required: true,
message: "The date of birth cannot be empty",
},
],
},
{<!-- -->
mode: "select",
label: "Occupation/Identity",
prop: "job",
renderProp: "job$view",
minWidth: "100px",
placeholder: "Please choose",
inputConfig: {<!-- -->
clearable: true,
},
options: (row) => {<!-- -->
return row.age > 22
? this.dropDownOptions.job.filter((item) => item.value !== "2")
: this.dropDownOptions.job.filter((item) => item.value === "2");
},
rules: [
{<!-- -->
required: true,
message: "Profession/identity cannot be empty",
},
],
},
{<!-- -->
mode: "select",
label: "Participate in competitions",
minWidth: "300px",
prop: "items",
renderProp: "items$view",
placeholder: "Multiple choice",
// splitter:' - ',
inputConfig: {<!-- -->
clearable: true,
multiple: true,
},
options: [
{<!-- --> value: "0", label: "Badminton" },
{<!-- --> value: "1", label: "Basketball" },
{<!-- --> value: "2", label: "ping pong" },
{<!-- --> value: "3", label: "swimming" },
],
rules: [
{<!-- -->
required: true,
message: "The competition item cannot be empty",
},
],
},
],
// row button configuration
rowButtons: [
{<!-- -->
name: "Edit",
type: "primary",
vIf: (row) => !row.isEdit,
click: (ref) => {<!-- -->
ref. edit();
},
},
{<!-- -->
name: "Save",
type: "success",
vIf: (row) => row.isEdit,
click: (ref, row) => {<!-- -->
console.log("save", row);
ref.validate((valid, fields) => {<!-- -->
if (valid) {<!-- -->
console.log("Validation passed");
ref. cancel();
} else {<!-- -->
console.log("Validation failed", fields);
}
});
},
},
{<!-- -->
name: "Cancel",
type: "danger",
vIf: (row) => row.isEdit,
click: (ref) => {<!-- -->
ref. cancel();
},
},
{<!-- -->
name: "Delete",
type: "danger",
vIf: (row) => !row.isEdit,
disabled(row, index) {<!-- -->
return row.name === "ryan";
},
click: (ref, row, index) => {<!-- -->
ref. delete();
},
},
],
};
},
created() {<!-- -->
this. getDropDownOptions();
this. getList();
},
methods: {<!-- -->
getList() {<!-- -->
setTimeout(() => {<!-- -->
this.listData = [...this.list];
}, 1000);
},
async getDropDownOptions() {<!-- -->
this.dropDownOptions.job = await Promise.resolve([
{<!-- --> label: "athlete", value: "0" },
{<!-- --> label: "Engineer", value: "1" },
{<!-- --> label: "Student", value: "2" },
]);
},
// insert new row
insert() {<!-- -->
this.$refs.ryEditTable.insert({<!-- -->
name: "",
age: "",
job: "",
date: "",
items: [],
});
},
},
};
</script>
<style scoped></style>
RY-EDIT-TABLE attribute
| Attribute name | Parameter | Description |
|---|---|---|
| listData:Array | Form data | |
| listConfig:Obejct | ||
| Table header configuration | ||
| mode:String text | select | time | date | The input box type of this column: text corresponds to el-input, select corresponds to el-select-time, corresponds to el- time-picker, date corresponds to el-date-picker | |
| label: String | header name | |
| prop: String | header field | |
| placeholder:String | Input box placeholder content | |
| disbaled:Boolean | Function | Return input Whether the box disables the condition | Dynamic conditions can return a boolean value through a callback function e.g (row)=>row.age ? true : false | |
| options: Array | Function | selector enumerates resources | fixed resources can be assigned directly options:[{label:xxx,value,xxx} ]| for resources requested asynchronously, please use a function to return the resource object e.g: options: (row)=> this.xxxoptions | |
| renderProp:String | In the non-editing state, the input box will render this field Value | |
| spliter:String | Multiple selector text rendering connector | |
| inputConfig:Object | The attribute value bound to the input box (the attribute inherits element plus, please refer to the element UI document) | |
| inputWrapperConfig:Object | The attribute value bound by the el-form-item tag outside the input box (the attribute inherits element plus, please refer to the element UI document) | |
| change(value,row,index) | input box change event | value: Any input box value, row: Object row data, index:Number row index | |
| blur(value,row,index) | input box blur event | value :Any input box value, row: Object row data, index:Number row index | |
| focus(value,row,index) | Input box focus event | value:Any input box value, row:Object row data, index:Number row index | |
| rules :Array | Input box verification rules | |
| rowButtons:Array | Inline button configuration | |
| name:String | Button name | |
| type:String | Button type primary | danger, etc. refer to element UI | |
| vIf:Boolean | Function | Control the rendering condition of the button, which can return a Boolean type, or return the control condition in the form of a callback function e.g (row) => row.xxx ? true:false; | |
| click(ref,row,index) | click event | callback parameter ref object contains four methods to control the state of the row, respectively ref.edit() activates the row Editing state, ref.cancel() cancels the editing state of the row, ref.delete() deletes the row, ref.validate(callback) validates the row, callback(valid:Boolean) valid: whether the verification passes the Boolean value; row : Row content, index: Row index | |
| operationsConfig:Object | Adjust operation column parameters | Parameters refer to element UI’s el- table-column |
| trigger:String | onChange | onBlur | onSave | default:onChange |
| showFlag:Boolean | Whether to enable cell data change flag | default:true |
| exposeRowKey: Boolean | Get the final table data, whether each row of data exposes the $uuidKey (each row’s unique identification field) attribute | default:false |
RY-EDIT-TABLE method
| Property Name | Description | Parameter| Return Value |
|---|---|---|
| insert(newRow） | Insert a new row | newRow:Object |
| recover() | Restore table | |
| activateAllRows() | Activate the editing status of all rows | |
| hasActivatedRows() | Whether there are unedited rows in the table | Boolean |
| getActivatedRows() | Get the set of rows that are already activated | Array |
| deactivateAll() | Cancel the activation state of all cells | |
| validateAll(callback) | Check all fields of the form | callback:Function | The callback function receives two parameters | valid: Boolean whether the verification is passed | fields: Object error field collection |
| clearValidate() | Clear all verification information | |
| changeRules(key,callback) | Adjust the verification rules | key:String | field name, callback(rule:Array,check:Function) | rule: the set of verification rules for this field, check: call this The function can perform a verification immediately |
| removeCellError(row,field) | Cancel the error message of a certain field in the row | row:Object The row object and $uuidKey attribute exists | field:String Field name |
| removeRowError(row) | Cancel all verification information of this row | row:Object This row object has $uuidKey attribute |
| getRowByKey($uuidKey) | According to the unique identifier of each row The row data | $uuidKey:String | is bound in each row Row object when the table is initially rendered. |
| getData() | Returns the current table data | Array |