0.3.5 • Published 2 years ago

vue-pc-table v0.3.5

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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
  }
}

image

Api

OptionsTypeDescriptionDefaultnecessary
titlesarraythead内容[]
datasarraytbody数据[]
hasCheckboolean表格是否拥有checkBox多选功能false
checkIdstringcheckBox全选的id(避免同一页面有重复id,故可自行设置此id)quan
bodyIdstringtbody的id(用于获取表格高度,以优化页面)tbodyId否(有多个table时必写)
maxHeightNumber用于设置tbody的最大高度,数据过多时自动出现滚动页面的70%高度
0.3.5

2 years ago

0.3.4

5 years ago

0.3.2

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.3

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago