一个基于element plus table 的表格封装组件

一、Vue组件表格文档

地址：
https://gitee.com/264727564/element-plus-table-ext

1. 功能介绍

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

2. 使用

在Vue中使用Vue组件表格：

<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 原事件对象