再利用可能な梱包VUE-EL-mtableのベースとelment-UIテーブル

ベースのelment-uiパッケージの再利用可能なテーブルVUE-EL-mtable

为了简化table使用，笔者将elmentui 中的table组件进行了，再封装，方便使用，
后期逐渐完善功能
示例demo 在文章最后

送信元アドレス
バージョン更新

0.1.8  新增 select，和文字点击切换功能

0.1.9 修复默认高度500px问题
0.2.0修复选中与未选中点击就切换问题，将方法在外面修改

インストール

npm i element-ui -S 
npm install vue-el-mtable -S

MTable属性

パラメータ	説明	タイプ	オプションの値	デフォルト値
たtableData	レンダリング情報含むヘッダは、（以下に詳述します）	オブジェクト	-	-
showSummary	テーブルの最後に合計行を表示するかどうか	ブーリアン	真/偽	偽
縞	テーブルのシマウマかどうか	ブーリアン	真/偽	真
境界	国境はあります	ブーリアン	真/偽	偽
tableSize	テーブルサイズ	ストリング	中/小/ミニ	小さい
tableRef	ref属性テーブル	ストリング	-	tableRef
逃亡します	ページング情報を（以下に詳述）	オブジェクト	-	{}

InboundのPageDateオプション

パラメータ	説明	タイプ	オプションの値	デフォルト
ページサイズ	ページあたりのデータ数	数	-	-
トータル	データの総数	アレイ	-	-
現在のページ	ページ現在のページ/クエリ	数	-	-

たtableDataオプション

パラメータ	説明	タイプ	オプションの値	デフォルト値
選択	チェック欄には情報が含まれています	オブジェクト	-	-
タイトル	ヘッダ	アレイ	-	-
日付	データをレンダリング	アレイ	-	-

公共のオプション

パラメータ	説明	タイプ	オプションの値	デフォルト値
幅	列の幅に対応	ストリング	-	-
minWidth	対応する列の最小幅	ストリング	-	-
修繕	これは、固定の左側または右側に表示されています	文字列、ブール	真、左、右	-
ALIGN	アラインメント	ストリング	左/中央/右	-
headerAlign	提供ヘッダアライメント、アライメントテーブルが使用される場合、その	ストリング	左/中央/右	-
ソート可能	列をソートできるかどうかに対応	ブール値、文字列	真、偽、「カスタム」	-
クラス名	クラス名]列	ストリング	-	-
サイズ変更可能	ドラッグして変更することができる幅に相当するカラム（border属性を設定する必要性には真の表です）	ブーリアン	真	-

選択オプション

パラメータ	説明	タイプ	オプションの値	デフォルト値
選択する	列だけを選択するための有効なデータの更新後のデータの前に選択された保持される（行キーrow.idを指定する必要が通過しなければならない、データは、DATASのIDが必要）	ブーリアン	真	-

タイトルオブジェクトオプション

パラメータ	説明	タイプ	オプションの値	デフォルト値
columnType	今リスト形式、nomal通常のテキスト、IMG画像表示装置、入力表示、操作ボタンBTNディスプレイ、btnDropdownメニュー、ドロップダウン表示操作ボタンは、表示切替スイッチを切り替える（DATASは、オブジェクトの配列によって制御されるスイッチ）	ブーリアン	nomal / IMG /入力/ BTN / btnDropdown /スイッチ	nomal
小道具	動的なページの表示データ値の結合、および列（重複しない）のキー値	ストリング	-	-
ラベル	ヘッダ名	ストリング	-	-
btns	だけBTNにcolumnTypeは、効果的なbtnDropdown、スイッチ時間は、キーバインディングの値を入力し、あなたがunselectNameを追加すると、チェックされている間、動的に、ボタンのテキストを変更するオプションの選択を追加する必要がある場合は、名前（またとない）は、操作ボタンの名前が表示されますテキスト、アセンブリisEnable DATASアレイに転送されたデータによって判断されるように、各オブジェクトは、選択されたかどうか	アレイ	示例：{タイプ：「btnKey」、名称：「btnName」}	-
タイプ	selectionチェックボックスが表示され、設定された場合index（1から始まる計算）行のインデックスが表示され、設定されている場合expand、ボタンには、展開表示されています	ストリング	選択/インデックス/拡大	-
activeColor	スイッチが開いている背景色	ストリング	-	＃409EFF
inactiveColor	スイッチが閉じている背景色	トリング	-	＃C0CCDA

MTable方法

イベント名	説明	コールバック引数
getSummaries	合計の計算方法の定義以来	列、データ
handleSelectionChange	フックオプションでは、変更イベントをトリガーするとき	選択
すべて選択	ユーザーが手動ですべて選択チェックボックスのトリガーイベントをチェックします	選択
cellClick	セルがクリックされるとイベントがトリガされます	行、列、セル、イベント
rowClick	行をクリックするとイベントがトリガされます	行、列、イベント
pageChage	当前页 currentPage 改变时会触发	当前页
setSort	输入框失去焦点触发	row
handleBtnClick	点击操作按钮事件	$event/type,row,data
switchClick	switch改变事件	change ，row,data

Example

//main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import MTable from 'vue-el-mtable';
import 'vue-el-mtable/lib/MTable.css';
Vue.use(ElementUI);
Vue.use(MTable);

<template>
  <div class="content">

   <MTable
   :table-data="tableData"
  :page-data="pageData"
  class="OverhangtableBox"
  @handleBtnClick="handleBtnClick"
  @switchClick="switchClick"
  @cellClick="cellClick"
  @handleSelectionChange="selectionChange"
  :tableSize ="'small'"
  :border="true"
  @pageChage="pageChage">

   </MTable>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection:[],
     pageData: {
        pageSize: 10,
        total: 1,
        currentPage: 1
      },
      tableData: {
    selection:{ //勾选列设置
    align:'center', //对齐方式  
    className:'class', //列的 className	
    select:true
  },
  titles: [
      {
      type: 'index',
      label: '序号',
      align: 'center',
    },
    {
    columnType:'nomal',
    sortable:true,//对应列是否可以排序
    resizable:true,
    prop: 'mobile',
    label: '会员账号',
    align: 'center',
  }, {
      columnType:'img',
    prop: 'imgUrl',
    label: '会员头像',
    align: 'center',
  },
   {
    prop: 'gmtCreate',
    label: '申请时间',
    align: 'center',
  },
   {
    columnType:'input',
    prop: 'inputValue',
    label: '添加备注',
    align: 'center',
  },

  {
    columnType:'switch',
    prop:'switch',
    label:'状态',
     align: 'center',
     activeColor:"#13ce66",
     inactiveColor:"#ff4949",
    btns:[
    {
      type: 'state',
      name: '启用'
    },
    ]
  },

  {
    columnType:'btn',
    prop:'btn',
    label:'操作',
     align: 'center',
    btns:[{
      type: 'view',
      name: '查看详情'
    },
    {
      type: 'del',
      name: '删除'
    },
       {
      type:"switchBtn",
      select:true,
      name:"选中",
      unselectName:"未选中"

    }
    ]
  },

  {
    columnType:'btnDropdown',
    prop:'btnDropdown',
    label:'操作',
     align: 'center',
    btns:[{
      type: 'update',
      name: '修改'
    },
    {
      type: 'open',
      name: '启用'
    }
    ]
  },
],
  datas: [
     {
      id:1,
      mobile:12112,
      gmtCreate:55555,
      imgUrl:'http://img.zhumengapp.com/group1/M00/01/F7/rBLFZl2umUuAEmYIAAoMmFYklEM494.jpg',
      inputValue:'inputValue',
      switch:true, //控制swich
      isEnable:true,//控制是否选中
    },
    {
      id:2,
    mobile:12112,
    imgUrl:'http://img.zhumengapp.com/group1/M00/01/F7/rBLFZl2umUuAEmYIAAoMmFYklEM494.jpg',
    gmtCreate:55555,
       switch:false,
       isEnable:false,
    },
    {
       id:3,
    mobile:12112,
    gmtCreate:55555,
     switch:false,
       isEnable:false,

    }
  ],
}

    }
  },
  methods: {
   // 操作
    handleBtnClick(type, row,data) {
     if(type.select){
                       row.isEnable = !row.isEnable //通过该判定来改中和未选中
                      }
      console.log(type, row,data,'handleBtnClick');
    },
   // switch选择
    switchClick(change, row,data) {
      console.log(change, row,data,'switchClick');
    },
     cellClick(row, column, cell, event) { // 当某个单元格被点击时会触发该事件
                 console.log(row, column, cell, event,'cellClick')
                  },
     selectionChange(val) { //当勾选项发生变化时会触发该事件
       this.multipleSelection = val;
                  },
      pageChage(page) {
        console.log(page,'page');
      this.pageData.currentPage = page
    },
  },
}
</script>

<style  scoped>
.content{
  width: 60%;
  height: 500px;
  margin: 0 auto;
}
</style>