Naivete Precedes Misrepresentation

    vue-el-mtable

    1.0.5 • Public • Published

    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

    参数 说明 类型 可选值 默认值
    tableData 包含表头和渲染信息(详细见下) Object —— ——
    showSummary 是否在表尾显示合计行 Boolean true/false false
    stripe 是否为斑马纹 table Boolean true/false true
    border 是否有边框 Boolean true/false false
    tableSize table的尺寸 String medium / small / mini small
    tableRef table的ref 属性 String —— tableRef
    pageData 分页信息(详细见下) Object —— { }
    maxHeight 表格最大高度 string 带单位 100%
    bottomOffset table表距离页面底部的距离用于响应计算table高度 number 85
    pageData Option
    参数 说明 类型 可选值 默认
    pageSize 每页显示的数据条数 number —— ——
    total 数据总条数 Array —— ——
    currentPage 当前页/查询的页数 number —— ——
    tableData Option
    参数 说明 类型 可选值 默认值
    selection 包含勾选列信息 Object —— ——
    titles 表头 array —— ——
    datas 渲染数据 Array —— ——
    tableData datas row Option
    参数 说明 类型 可选值 默认值
    btnView 用于过滤当前行,动态显示自定义文字按钮,为空默认显示全部 Array columnType 为btn时,按钮的type值 ——
    public Option
    参数 说明 类型 可选值 默认值
    width 对应列的宽度 string —— ——
    minWidth 对应列的最小宽度 string —— ——
    fixed 列是否固定在左侧或者右侧 string, boolean true, left, right ——
    align 对齐方式 String left/center/right ——
    headerAlign 表头对齐方式,若不设置该则使用表格的对齐方式 String left/center/right ——
    sortable 对应列是否可以排序 boolean, string true, false, 'custom' ——
    className 列的 className string —— ——
    resizable 对应列是否可以通过拖动改变宽度 (需要在 table 上设置 border 属性为真) boolean true ——
    selection Option
    参数 说明 类型 可选值 默认值
    select 仅对 selection 的 列有效, 则会在数据更新之后保留 之前选中的数据(需指定 row-key row.id必须要传,datas中数据需要id) Boolean true ——
    titles object Option
    参数 说明 类型 可选值 默认值
    columnType 列表现形式,nomal正常文本,img显示图片,input显示, btn 显示操作按钮, btnDropdown 显示操作按钮下拉菜单,switch显示switch开关(通过datas数组对象的switch来控制) Boolean nomal/img/input/btn/btnDropdown/switch nomal
    prop 动态绑定显示页面的数据值,和列的key值(不可重复) string —— ——
    label 表头名 string —— ——
    btns 仅columnType为btn,btnDropdown,switch时,有效,type为绑定的key值,name为要显示的操作按钮名字(不可重复)如果需要动态改变按钮文字,添加select选项,同时添加unselectName为未选中的文字,同时添加prop为每个按钮的布尔值通过传递到组件的数据 datas数组中每个对象中的对应的prop来判断是否选中 Array 示例:{type:"btnKey",name:"btnName"} ——
    type selection 则显示多选框;如果设置了 index 则显示该行的索引(从 1 开始计算);如果设置了 expand 则显示为一个可展开的按钮 string selection/index/expand ——
    activeColor switch 打开时的背景色 string —— #409EFF
    inactiveColor switch 关闭时的背景色 tring —— #C0CCDA

    MTable Method

    事件名称 说明 回调参数
    getSummaries 自定义的合计计算方法 columns,data
    handleSelectionChange 当勾选项发生变化时会触发该事件 selection
    selectAll 当用户手动勾选全选 Checkbox 时触发的事件 selection
    cellClick 当某个单元格被点击时会触发该事件 row, column, cell, event
    rowClick 当某一行被点击时会触发该事件 row, column, event
    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: {
            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

    Install

    npm i vue-el-mtable

    DownloadsWeekly Downloads

    2

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    953 kB

    Total Files

    13

    Last publish

    Collaborators

    • marendu