Skip to content

Latest commit

 

History

History
139 lines (122 loc) · 5.09 KB

README.md

File metadata and controls

139 lines (122 loc) · 5.09 KB

一个基于 element-ui 的可编辑表格组件

使用 async-validator 验证

Install

  • 下载包 npm i el-table-edit
  • 全局注册
import ElTableEdit from "el-table-edit";
Vue.use(ElTableEdit);

  • 在浏览器中使用

    下载 dist 中的 js 和 css 文件并引入

Usage

<template>
  <ElTableEdit
    :data="tableData"
    :columns="columns"
    border
    stripe
    style="width: 100%"
    @submitRow="submit"
  >
    <template v-slot:column-actions="{ row, $index }">
      <el-button @click="delItem(row, $index)" type="danger" size="small">
        删除
      </el-button>
    </template>
  </ElTableEdit>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "菜单名",
          key: "title",
          edit: true,
          rules: [
            { required: true, message: "请输入菜单名称" },
            {
              min: 2,
              max: 5,
              message: "长度在 2 到 5 个字符",
            },
          ],
          clearable: true,
        },
        {
          title: "路径",
          key: "path",
          edit: true,
          rules: [
            { required: true, message: "请输入菜单路径" },
            {
              pattern: /^\/[\w-/]*$/,
              message: "请输入正确的路径",
            },
          ],
          clearable: true,
        },
        {
          title: "图标",
          key: "icon",
          type: "icon",
          edit: true,
          rules: [],
          clearable: true,
        },
      ],
      tableData: [{ title: "首页", path: "/index", icon: "el-icon-s-home" }],
    };
  },
  methods: {
    submit(row, valid) {
      if (valid) {
        // 验证通过
      } else {
        // 验证不通过
      }
    },
  },
};
</script>

Api

ElTableEdit

参数 说明 类型 可选值 默认值
data tabledata Array []
columns 列配置 Array []
actionsWidth 操作栏宽度 Number 250
editButText 编辑按钮文字 String 编辑
submitButText 保存按钮文字 String 保存
cancelButText 取消按钮文字 String 取消
actionsFixed 操作栏固定 与 el-table 一致 false
el-table 其他属性

columns

参数 说明 类型
title 列标题
key 与 data 对应的字段名 String
width 列宽度 与 el-table 一致
minWidth 列最小宽度 与 el-table 一致
edit 是否可编辑 Boolean
rules 可编辑时的验证规则 Array
clearable 编辑时的 input 是否可清空 与 el-input 一致
type 当前列字段的类型 目前可选‘index’，‘selection’，‘icon’，‘select’ ,‘textarea’ ，默认‘text’
options type 为 select 时，用于过滤或选择的数组 例： [{label:"男",value:"1",},{label:"女",value:"2"}]
fixed 列固定 与 el-table 一致

Events

事件名称 说明 回调参数
submitRow 点击行保存时 （row，valid）
el-table 其他事件

Slot

name 说明 props
header 操作栏头部内容
append 表格最后一行内容，与 el-tabel 一样
column-actions 操作栏的内容，会在按钮之后，可用来做删除，打印等功能 （row，$index）
key 自定义单元格的非编辑状态 （row，$index）