# element-plus-table-ext

**Repository Path**: zhangaili08/element-plus-table-ext

## Basic Information

- **Project Name**: element-plus-table-ext
- **Description**: 基于vue3 element-plus 封装table功能
支持导出，打印，自定义字段编辑，支持表格转图标
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-12-07
- **Last Updated**: 2023-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、Vue组件表格文档

### 1. 功能介绍

Vue组件表格是一个基于element plus table 的表格封装组件，可以用来显示排序、过滤、导出、转图标、搜索、全屏等功能。

### 2. 使用

在Vue中使用Vue组件表格：

```js
<vue-table :data="data" :columns="columns" :config-table="config" :config-event="{
            'row-click':rowClick
        }">
</vue-table> 

<script>
import vueTable from './components/element-plus-table-ext.vue';

export default {
  data(){
        return {
            config:{ 
                height:"400px",
                border:true
            },
             data:[],
             columns:[
                {code:"name",name:"姓名",sortable:true,dataType:"column"},      
                {code:"address",name:"地区",sortable:true,dataType:"column"},
                {code:"date",name:"日期",sortable:true,dataType:"column"},
                {code:"money",name:"支付金额",sortable:true,dataType:"number"},
                {code:"number",name:"购买数量",sortable:true,dataType:"number"},
                {code:"price",name:"单价",sortable:true,dataType:"number"}, 
            ],
        }
    }，
    created(){
         var dataRand={
            name:['张三','李四','王五','张飞','关羽','小明','小红','小白'],
            address:['北京','深圳','上海','广州','成都','黑龙江','乌鲁木齐','香港'],
            date:['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06','2020-07','2020-08','2020-09','2020-10']
        }
        for(var i=0;i<30;i++){
            var row={
                name:dataRand.name[this.rand(dataRand.name.length)],
                address:dataRand.address[this.rand(dataRand.address.length)],
                date:dataRand.date[this.rand(dataRand.date.length)],
                number:5+this.rand(100),
                price:5+this.rand(200)
            };
            row.money=row.number*row.price; 
            this.data.push(row);
        } 
    },
    methods:{
      rowClick(e){
          console.log(e);
      },
      rand(max){
        return Math.round(Math.random()*(max-1));
      }
  }
}
</script>
```

### 3. Props

| 属性             | 类型   | 默认值 | 说明                                |
| ---------------- | ------ | :----- | ----------------------------------- |
| data             | Array  | []     | 表格数据                            |
| columns          | Array  | []     | 表格列                              |
| columns.dataType | String | null   | column 柱形图列 number 柱形图数据项 |
| config           | Object | {}     | element plus table 原配置项         |
| config-event     | Object | {}     | element plus table 原事件对象       |
### 4. 示例图

默认

<img src="./public/default.png" alt="edit"  />

字段编辑

<img src="./public/edit.png" alt="edit"  />

图表

<img src="./public/char.png" alt="char"  />

导出

<img src="./public/export.png" alt="export"  />

搜索

<img src="./public/find.png" alt="find"  />

打印

<img src="./public/print.png" alt="print"  />