# el-table-simple

**Repository Path**: yeminglong/el-table-simple

## Basic Information

- **Project Name**: el-table-simple
- **Description**: el-table二次封装，调用更简单便捷
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-07-15
- **Last Updated**: 2024-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# el-table-simple

#### 介绍
el-table二次封装，调用更简单便捷

#### 软件架构
软件架构说明

#### 安装教程



首先安装包

```
npm i el-table-simple
```



注册：

```
import { ElTableSimple } from 'el-table-simple'
Vue.component('ElTableSimple', ElTableSimple)
```



使用示例

```
<template>
  <el-table-simple
    :columns="columns"
    :data="data"
  >
    <template #item_name="slotProps">
      <button type="primary">123</button>
      <div>{{ slotProps.row.item_version }}</div>
    </template>
    <template #test41="slotProps">
      <div>测试列4-1</div>
      <button>{{ slotProps.row.item_code }}</button>
    </template>
    <template #test42="slotProps">
      <button type="primary">测试列4-3</button>
      <div>{{ slotProps.row.item_version }}</div>
    </template>
    <template #test43="slotProps">
      <button type="primary">测试列4-4</button>
      <div>{{ slotProps.row.item_version }}</div>
    </template>
    <template #opt="slotProps">
      <button type="primary" @click="test1(slotProps.row)">修改 删除</button>
    </template>
  </el-table-simple>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      columns: [
        { label: '测试列1', prop: 'item_id' },
        { label: '测试列2', prop: 'item_name', slotName: 'item_name' },
        { label: '测试列3', prop: 'item_code', width: 100 },
        {
          label: '测试列4',
          width: 100,
          children: [
            { label: '测试列4-1', prop: 'item_explain', width: 100, slotName: 'test41' },
            {
              label: '测试列4-2',
              width: 100,
              children: [
                { label: '测试列4-3', prop: 'is_end', width: 100, slotName: 'test42' },
                { label: '测试列4-4', prop: 'parent_item_id', width: 100, slotName: 'test43' }
              ]
            }
          ]
        },
        { label: '操作', slotName: 'opt', width: 150 }
      ],
      data: [
        {
          item_id: '07c1f9c5d7784deab187aaf35e346337',
          item_name: '2最顶端目录111',
          item_code: '0011',
          item_version: '1.0.0',
          item_note: '测试1',
          item_usage: '测试1',
          item_index: 13,
          item_explain: '测试',
          is_end: 1,
          parent_item_id: 0,
          item_status: 1,
          create_time: '2020-10-28 15:35:42.725877',
          update_time: '2020-12-02 17:20:19.696056'
        },
        {
          item_id: '07c1f9c5d7784deab187aaf35e346337',
          item_name: '2最顶端目录222',
          item_code: '0012',
          item_version: '2.0.0',
          item_note: '测试2',
          item_usage: '测试2',
          item_index: 13,
          item_explain: '测试2',
          is_end: 1,
          parent_item_id: 0,
          item_status: 1,
          create_time: '2020-10-28 15:35:42.725877',
          update_time: '2020-12-02 17:20:19.696056'
        }
      ]
    }
  },
  methods: {
    test1 () {

    }
  }
}
</script>

<style scoped>

</style>

```





1.  ![image-20210716112351388](https://gitee.com/yeminglong/el-table-simple/raw/master/readme/image-20210716112351388.png)
2.  ![image-20210716112428189](https://gitee.com/yeminglong/el-table-simple/raw/master/readme/image-20210716112428189.png)
3.  ![image-20210716112524959](https://gitee.com/yeminglong/el-table-simple/raw/master/readme/image-20210716112524959.png)

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx




#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 https://gitee.com/yeminglong/el-table-simple.git
3.  你可以https://gitee.com/yeminglong/el-table-simple.git 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)