npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ry-edit-table

v1.0.8

Published

Vue3多行可编辑表格 Multi-row editable table component for Vue3(work with element plus)

Downloads

47

Readme

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

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

😂不支持

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

🔧快速开始:

🙂安装
npm i ry-edit-table
😉引入
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");
😁使用
<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 | select | time | date | 该列输入框类型:text 对应 el-input ,select 对应 el-select-time,对应 el-time-picker ,date 对应 el-date-picker | | | label: String | 表头名字 | | | prop: String | 表头字段 | | | placeholder:String | 输入框占位内容 | | | disbaled:Boolean | Function | 返回输入框是否禁用条件 | 动态条件可通过回调函数返回布尔值 e.g (row)=>row.age ? true : false | | | options:Array | Function | 选择器枚举资源 | 固定资源可直接赋值 options:[{label:xxx,value,xxx} ]| 异步请求的资源请用函数返回该资源对象 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 事件 | value:Any 输入框的值,row:Object 行数据,index:Number 行索引 | | | blur(value,row,index) | 输入框 blur 事件 | value:Any 输入框的值,row:Object 行数据,index:Number 行索引 | | | focus(value,row,index) | 输入框 focus 事件 | value:Any 输入框的值,row:Object 行数据,index:Number 行索引 | | | rules:Array | 输入框校验规则 | | rowButtons:Array | 行内按钮配置 | | | | name:String | 按钮名字 | | | type:String | 按钮类型 primary | danger 等参考 element UI | | | vIf:Boolean | Function | 控制按钮的渲染条件,可返回布尔类型,或以回调函数形式返回控制条件 e.g (row) => row.xxx ? true:false; | | | click(ref,row,index) | 点击事件 | 回调参数 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 | onBlur | onSave | default:onChange | | showFlag:Boolean | 是否开启单元格数据变动标识旗帜 | default:true | | exposeRowKey:Boolean | 获取最终的表格数据,每行数据是否暴露 $uuidKey(每行唯一标识字段)属性 | default:false |

RY-EDIT-TABLE 方法

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

源码/DEMO https://gitee.com/RYANLLL/ry-edit-table

💡组件目前处于初版阶段,仅支持一般性非复杂功能的功能,但也非常实用,欢迎体验。