vue-el-mtable v1.0.5

vue-el-mtable

=======

Version update

1.0.5 添加每一行可以通过binView来动态显示自定义按钮

1.0.2 修改文字按钮切换无法同时出现多个按钮问题，修改了实现方式

1.0.0 添加表格自适应高度变化 ，默认最大高度是100%，maxHeight、bottomOffset都能改变表格初始高度

​ 0.2.0修复选中与未选中点击就切换问题，将方法在外面修改

​ 0.1.9 修复默认高度500px问题

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

Installation

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

MTable Attributes

pageData Option

tableData Option

tableData datas row Option

public Option

selection Option

titles object Option

MTable Method

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: {
        pageNum: 1,
        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",
      prop:"change",
      select:true,
      name:"选中",
      unselectName:"未选中"

    },
    {
      type:"switchBtn1",
      prop:"change1",
      select:true,
      name:"选中1",
      unselectName:"未选中1"

    }
    ]
  },

  {
    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,
       btnView:['del','view','switchBtn','switchBtn1'],//配合自定义按钮使用，默认为空表示全部显示
     
      change:true,
      change1:true
    },
    {
      id:2,
    mobile:12112,
    imgUrl:'http://img.zhumengapp.com/group1/M00/01/F7/rBLFZl2umUuAEmYIAAoMmFYklEM494.jpg',
    gmtCreate:55555,
     btnView:['view','switchBtn',],//配合自定义按钮使用，默认为空表示全部显示
       switch:false,
          change:true,
      change1:false
    },
    {
       id:3,
    mobile:12112,
    gmtCreate:55555,
     switch:false,
       change:false,
      change1:true
     

    }
  ],
}

    }
  },
  methods: {
   // 操作
    handleBtnClick(type, row,data) {
      if(type.select){
              // row[type.prop] 通过该判定来改中和未选中
            row[type.prop] = ! row[type.prop]
      } //表示开启了文字切换
      console.log(type, row,data,'handleBtnClick');

    },
   // switch选择
    switchClick(type, row,data) {
      console.log(type, row,data,'switchClick');
    },
     cellClick(row, column, cell, event) { // 当某个单元格被点击时会触发该事件
                 console.log(row, column, cell, event,'cellClick')
                  },
     selectionChange(val) { //当勾选项发生变化时会触发该事件
       this.multipleSelection = val;
       console.log(this.multipleSelection);
                  },
      pageChage(page) {
        console.log(page,'page');
      this.pageData.pageNum = page
      this.pageData.currentPage = page
    },
  },
}
</script>

<style  >
body{
  margin: 0;
}

.content{
  width: 50%;
  position: relative;
  height: 200px;
  margin: 0 auto;
}

</style>

Contact author

我的博客

first commit