vue-pc-table

table for pc based Vue2.x(当table超出最大高度时，tbody会自动出现滚动条，thead不动)

Setup

npm install vue-pc-table

Detail

html

  <vueTable :titles='tableTitles' :datas='dataList' :hasCheck='true' :isLoad='isLoad' :maxHeight='230'>
    <template slot-scope="tableItem">
      <td>{{tableItem.datas.userName | isEmpty}}</td>
      <td>{{tableItem.datas.adr | isEmpty}}</td>
      <td>{{tableItem.datas.content | isEmpty}}</td>
      <td>
        <button type="button" class="btn-danger btn-mg">删除</button>
      </td>
    </template>
  </vueTable>

js

import vueTable from 'vue-pc-table'
export default {
  name: 'app',
  data () {
    return {
      isLoad: false,
      tableTitles: ['名字', '地址', '内容', '操作'],
      dataList: [
        {userName: '叶子', adr: '青浦区', content: 'asad'},
        {userName: '阿斯达', adr: '哈萨克斯', content: 'd'},
        {userName: '阿萨德', adr: '阿联酋地区', content: '----'},
        {userName: '薇姿', adr: '威尔士地区', content: 'as'},
        {userName: '萨德年少', adr: '扬州', content: 'aers'}]
    }
  },
  components: {
    vueTable
  }
}

Api

Options	Type	Description	Default	necessary
titles	array	thead内容	[]	是
datas	array	tbody数据	[]	否
hasCheck	boolean	表格是否拥有checkBox多选功能	false	否
checkId	string	checkBox全选的id（避免同一页面有重复id，故可自行设置此id）	quan	否
bodyId	string	tbody的id（用于获取表格高度，以优化页面）	tbodyId	否（有多个table时必写）
maxHeight	Number	用于设置tbody的最大高度，数据过多时自动出现滚动	页面的70%高度	否