# ry-edit-table

**Repository Path**: RYANLLL/ry-edit-table

## Basic Information

- **Project Name**: ry-edit-table
- **Description**: 基于Vue3和element plus二次封装的一个可编辑表格 An editable-table work with Vue 3 and element Plus.
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 3
- **Created**: 2023-05-09
- **Last Updated**: 2025-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**⭐️一款基于 Vue3.0 和 Element Plus 二次封装的支持多行编辑的可编辑表格 ry-edit-table，轻量简单实用。**

##### 😇支持：

- 支持激活表格的多行编辑。
- 通过表格配置属性 `listConfig`即可让组件渲染出对应的表头。
- 通过表格配置属性 `listConfig`即可设置对应列的输入框类型和校验规则。
- 通过表格配置属性`listConfig`，即可快捷处理单元格输入框的`change`、`blur`、`focus`事件或输入框状态。
- 通过行内按钮配置属性 `listConfig`，即可让组件渲染出相关的按钮，并在配置属性那里即可处理相关点击事件和按钮状态。
- 提供相关的方法以支持单行校验，多行校验，动态调整校验规则，清空校验，获取最终表格数据等功能。

😂**不支持**：

- 表头合并、行合并等一切复杂结构。

#### 🔧快速开始：

##### 🙂安装

```shell
npm i ry-edit-table
```

###### 😉引入

```javascript
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 'ry-edit-table/dist/style.css';// 引入ry-edit-table样式

createApp(App)
  .use(ElementUI)
  .use(ryEditTable)
  .mount("#app");
```

##### 😁使用

```js
<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="序号" width="100px" fixed="left" />
    </ry-edit-table>
  </div>
</template>

<script>
export default {
  name: "demoPage",

  data() {
    return {
      // 下拉资源集合
      dropDownOptions: {
        job: [],
      },
      // 模拟数据
      list: [
        {
          name: "Time1",
          age: "26",
          pkid: 1,

          date: "1998-01-30",
          job: "0",
          job$view: "运动员",
          items$view: "羽毛球，游泳",
          items: ["0", "3"],
        },
        {
          name: "cherry",
          age: "13",
          pkid: 2,

          date: "1996-01-30",
          job: "2",
          job$view: "学生",
          items$view: "羽毛球，游泳",
          items: ["0", "3"],
        },
        {
          name: "alex",
          age: "28",
          pkid: 3,

          date: "1992-01-30",
          job: "0",
          job$view: "运动员",
          items$view: "羽毛球，游泳",
          items: ["0", "3"],
        },
      ],
      // 表格数据
      listData: [],
      // 表头配置
      listConfig: [
        {
          mode: "text",
          label: "姓名",
          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: "姓名不能为空",
            },
          ],
        },
        {
          mode: "text",
          label: "年龄",
          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("年龄需要大于1岁");
                  } else {
                    resolve();
                  }
                });
              },
            },
          ],
        },
        {
          mode: "date",
          label: "出生日期",
          prop: "date",
          minWidth: "150px",
          inputConfig: {
            "value-format": "YYYY-MM-DD",
          },
          rules: [
            {
              type: "date",
              required: true,
              message: "出生日期不能为空",
            },
          ],
        },
        {
          mode: "select",
          label: "职业/身份",
          prop: "job",
          renderProp: "job$view",
          minWidth: "100px",
          placeholder: "请选择",
          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: "职业/身份不能为空",
            },
          ],
        },

        {
          mode: "select",
          label: "参与比赛项目",
          minWidth: "300px",
          prop: "items",
          renderProp: "items$view",
          placeholder: "多项选择",
          // spliter:' - ',
          inputConfig: {
            clearable: true,
            multiple: true,
          },
          options: [
            { value: "0", label: "羽毛球" },
            { value: "1", label: "篮球" },
            { value: "2", label: "乒乓球" },
            { value: "3", label: "游泳" },
          ],
          rules: [
            {
              required: true,
              message: "比赛项目不能为空",
            },
          ],
        },
      ],

      // 行按钮配置
      rowButtons: [
        {
          name: "编辑",
          type: "primary",
          vIf: (row) => !row.isEdit,
          click: (ref) => {
            ref.edit();
          },
        },
        {
          name: "保存",
          type: "success",
          vIf: (row) => row.isEdit,
          click: (ref, row) => {
            console.log("保存", row);
            ref.validate((valid, fields) => {
              if (valid) {
                console.log("校验通过");
                ref.cancel();
              } else {
                console.log("校验不通过", fields);
              }
            });
          },
        },
        {
          name: "取消",
          type: "danger",
          vIf: (row) => row.isEdit,
          click: (ref) => {
            ref.cancel();
          },
        },

        {
          name: "删除",
          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: "运动员", value: "0" },
        { label: "工程师", value: "1" },
        { label: "学生", value: "2" },
      ]);
    },
    // 插入新增行
    insert() {
      this.$refs.ryEditTable.insert({
        name: "",
        age: "",
        job: "",
        date: "",
        items: [],
      });
    },
  },
};
</script>

<style scoped></style>

```

#### RY-EDIT-TABLE 属性

| **属性名** | 参数 | 说明  |
| --- | --- | --- |
| listData:Array |  | 表格数据 |
| listConfig:Obejct |
 | 表头配置 |
|  | mode:String text &#124; select &#124; time &#124; date | 该列输入框类型：text 对应 el-input ,select 对应 el-select-time,对应 el-time-picker ,date 对应 el-date-picker |
|  | label: String | 表头名字 |
|  | prop: String | 表头字段 |
|  | placeholder:String | 输入框占位内容 |
|  | disbaled:Boolean &#124; Function | 返回输入框是否禁用条件 &#124; 动态条件可通过回调函数返回布尔值 e.g (row)=>row.age ? true : false |
|  | options:Array &#124; Function | 选择器枚举资源 &#124; 固定资源可直接赋值 options:[{label:xxx,value,xxx} ]&#124; 异步请求的资源请用函数返回该资源对象 e.g: options:(row)=> this.xxxoptions |
|  | renderProp:String | 非编辑状态下，输入框将渲染该字段值  |
|  | spliter:String | 多项选择器文本渲染连接符 |
|  | inputConfig:Object | 输入框绑定的属性值（属性继承 element plus ，可参考 element UI 文档） |
|  | inputWrapperConfig:Object | 输入框外层 el-form-item 标签绑定的属性值（属性继承 element plus ，可参考 element UI 文档） |
|  | change(value,row,index) | 输入框 change 事件 &#124; value:Any 输入框的值，row：Object 行数据，index:Number 行索引 |
|  | blur(value,row,index) | 输入框 blur 事件  &#124; value:Any 输入框的值，row：Object 行数据，index:Number 行索引 |
|  | focus(value,row,index) | 输入框 focus 事件 &#124; value:Any 输入框的值，row：Object 行数据，index:Number 行索引 |
|  | rules：Array | 输入框校验规则 |
| rowButtons:Array | 行内按钮配置 |  |
|  | name:String  | 按钮名字 |
|  | type:String | 按钮类型 primary &#124; danger 等参考 element UI |
|  | vIf:Boolean &#124; Function | 控制按钮的渲染条件，可返回布尔类型，或以回调函数形式返回控制条件 e.g (row) => row.xxx ? true:false; |
|  | click(ref,row,index)  | 点击事件 &#124; 回调参数 ref 对象包含四个控制该行状态的方法，分别为 ref.edit() 激活该行编辑状态，ref.cancel() 取消该行编辑状态，ref.delete() 删除该行，ref.validate(callback) 校验该行，callback(valid:Boolean) valid ：是否校验通过布尔值 ;row：行内容 ，index：行索引 |
| operationsConfig:Object | 调整操作列参数 | 参数参考 element UI 的 el-table-column |
| trigger:String | onChange &#124; onBlur &#124; onSave | default:onChange |
| showFlag:Boolean | 是否开启单元格数据变动标识旗帜 | default:true |
| exposeRowKey:Boolean | 获取最终的表格数据，每行数据是否暴露 $uuidKey（每行唯一标识字段）属性 | default:false |

#### RY-EDIT-TABLE 方法

| **属性名** | 说明 | **参数 &#124; 返回值** |
| --- | --- | --- |
| insert(newRow） | 插入新增行 | newRow:Object |
| recover() | 还原表格 |  |
| activateAllRows() | 激活所有行的编辑状态 |  |
| hasActivatedRows() | 表格中是否有未完成编辑的行 | Boolean |
| getActivatedRows() | 获取已经处于激活状态的行集合 | Array |
| deactivateAll() | 取消所有单元格的激活状态 |  |
| validateAll(callback) | 校验表格全部字段 | callback:Function &#124; 回调函数接收两个参数 &#124; valid:Boolean 是否校验通过 &#124; fields ：Object 错误字段集合 |
| clearValidate() | 清空全部校验信息 |  |
| changeRules(key,callback) | 调整校验规则 | key:String &#124; 字段名，callback(rule:Array,check:Function) &#124; rule: 该字段的校验规则集合 ，check：调用该函数可立即执行一次校验  |
| removeCellError(row,field) | 取消该行某个字段的错误信息 | row:Object 该行对象且存在 $uuidKey 属性 &#124; field:String 字段名 |
| removeRowError(row) | 取消该行所有校验信息 | row:Object 该行对象且存在 $uuidKey 属性 |
| getRowByKey($uuidKey） | 根据每行的唯一标识获取该行数据 | $uuidKey:String &#124; 初始渲染表格时绑定在每行 Row 对象中。 |
| getData() | 返回当前表格数据 | Array |

##### 源码/DEMO https://gitee.com/RYANLLL/ry-edit-table 
#### 💡组件目前处于初版阶段，仅支持一般性非复杂功能的功能，但也非常实用，欢迎体验。