一个基于 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） |