Vue m table

A table component for vue.

Version: 1.0.2 Updated: 09/13/2018

By: mengdu License: MIT

Downloads Last 30 Days: 40

Install

npm i vue-m-table
yarn add vue-m-table

Repository: https://github.com/mengdu/m-table

CDNs

bundle.run: https://bundle.run/vue-m-table

jsDelivr: https://cdn.jsdelivr.net/npm/vue-m-table

unpkg: https://unpkg.com/vue-m-table

Table

Vue 的数据表格组件

功能用法与 ElTable 相似。

Live Demo

install

npm install -S vue-m-table
import MTable from 'vue-m-table'

Vue.use(MTable) // 注册 m-table, m-table-column 组件

template

<template>
  <div style="width: 800px; margin: 100px auto">
    <m-table :data="data" stripe border :row-class="rowCalss" max-height="400" head-height="35" title="数据表格">
      <m-table-column index label="编号" min-width="40px"></m-table-column>
      <m-table-column prop="name" label="名字" align="center" width="250"></m-table-column>
      <m-table-column prop="age" label="年龄" align="center"></m-table-column>
      <m-table-column prop="login" label="username"></m-table-column>
      <m-table-column label="操作" class-name="td-test" label-class-name="th-test">
        <template slot-scope="scope">
          <a href="#">{{scope.row.login}}</a>
        </template>
      </m-table-column>
    </m-table>
  </div>

</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      data: [
        {name: '张三', age: 19, login: 'zhangsan'},
        {name: '李四', age: 18, login: 'lisi'},
        {name: '王五', age: 20, login: 'wangwu'},
        {name: '测试员', age: 21, login: 'ceshi'},
      ]
    }
  },
  methods: {
    rowHover (row) {
      console.log(row)
    },
    rowCalss (row) {
      return ['test']
    }
  }
}
</script>

MTable Attributes

参数 说明 类型 可选值 默认值
title 标题 String
data 数据 Array
stripe 斑马线 Boolean false
border 边框 Boolean false
row-class 行类名 String\Function
height 高度 String\Number
max-height 最大高度 String\Number
width String\Number
max-width 最大宽 String\Number
head-height 表头高度 String\Number 17
scroll-width 滚动条宽度 String\Number
void-text 空时显示文字 String\Number 暂无数据

MTable Events

参数 说明 参数 可选值
row-click 行被点击 {event, row, index}
row-hover 鼠标经过行 {event, row, index}

MTable-column Attributes

参数 说明 类型 可选值 默认值
prop 列显示的字段 string
label 表头显示名字 string
align 列对齐 string center,left,right left
index 序号列 Boolean true/false false
minWidth 列可缩小最小宽度 string number
className 列td类名 String, Function
labelClassName 列th类名 String, Function
width 列宽 String\Number
show 是否显示列 Boolean true/false true

MTable Solt

参数 说明
title 标题部分

Other

实现参考了 ElTable

Contributors



lanyue
commits

Dependencies


DevDependencies


Categories: Vue js
Tags: