多行可编辑表格ry |
您所在的位置：网站首页 › 二次封装el-input › 多行可编辑表格ry |
多行可编辑表格ry
|
⭐️一款基于 Vue3.0 和 Element Plus 二次封装的支持多行编辑的可编辑表格 ry-edit-table，轻量简单实用。
😂不支持： 表头合并、行合并等一切复杂结构。 🔧快速开始： 🙂安装 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"); 😁使用 RY-EDIT-TABLE 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 { 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: [], }); }, }, }; 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-pickerlabel: String表头名字prop: String表头字段placeholder:String输入框占位内容disbaled:Boolean | Function返回输入框是否禁用条件 | 动态条件可通过回调函数返回布尔值 e.g (row)=>row.age ? true : falseoptions:Array | Function选择器枚举资源 | 固定资源可直接赋值 options:[{label:xxx,value,xxx} ]| 异步请求的资源请用函数返回该资源对象 e.g: options:(row)=> this.xxxoptionsrenderProp: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 UIvIf: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-columntrigger:StringonChange | onBlur | onSavedefault:onChangeshowFlag:Boolean是否开启单元格数据变动标识旗帜default:trueexposeRowKey:Boolean获取最终的表格数据，每行数据是否暴露 $uuidKey（每行唯一标识字段）属性default:false RY-EDIT-TABLE 方法 属性名说明参数 | 返回值insert(newRow）插入新增行newRow:Objectrecover()还原表格activateAllRows()激活所有行的编辑状态hasActivatedRows()表格中是否有未完成编辑的行BooleangetActivatedRows()获取已经处于激活状态的行集合ArraydeactivateAll()取消所有单元格的激活状态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 gitee.com/RYANLLL/ry-… 💡组件目前处于初版阶段，仅支持一般性非复杂功能的功能，但也非常实用，欢迎体验。 |
【本文地址】
今日新闻 |
推荐新闻 |