saryz-table-vue v1.0.4

saryz-table-vue

一个基于elementUI的快速列表创建组件，使用最少的dom代码自动呈现所需的外观，配置类似于Jquery easyUI

安装 install

npm install saryz-table-vue --save

组件依赖 elementUI
dependence elementUI

快速使用 Quick to use

// main.js 全局引用 Global references
import SaryzTable from 'saryz-table-vue'
import 'saryz-table-vue/lib/saryz-table-vue.css'

Vue.use(SaryzTable)

// xxxxxx.vue 使用 use
<template>
  <div class="table_demo">
    <SaryzTable :colsOption="colsOption" :tableData="tableData" :height="500"></SaryzTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { name: '刘德华', phoneNumber: '13989876567' },
        { name: '刘德华', phoneNumber: '13989876567' },
        { name: '刘德华', phoneNumber: '13989876567' }
      ],
      colsOption: [
        {
          id: 'name',
          name: '姓名',
          width: ''
        }, {
          id: 'phoneNumber',
          name: '电话',
          width: '120'
        }
      ]
    }
  }
}
</script>
<style>
  .table_demo {
    padding: 30px;
    border: 1px solid #ccc;
    width: 1000px;
    margin: 30px auto;
    background: #fff;
  }
</style>

Props

colsOption:列定义

demo

https://saryz-ui.github.io/