最近研究Vue，用的Element-UI作為框架。可能是我太菜雞，感覺(jué)相比于JQuery的DataTables，Element-UI提供的表格功能太少了。找了一下午，讓我找到一個(gè)比較好用的table插件。

詳情請(qǐng)關(guān)注官網(wǎng)：https://njleonzhang.github.io/vue-data-tables/#/quickstart

這里簡(jiǎn)單介紹一下這個(gè)插件的使用

安裝

1. npm命令安裝

npm install vue-data-tables

2. main.js 中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import DataTables from 'vue-data-tables'

Vue.use(ElementUI)
Vue.use(DataTables)

安裝完成
p.s. 如果翻頁(yè)需要英文，還需要安裝L10N。我沒(méi)做實(shí)驗(yàn)，這里就不做敘述了。

HelloWorld

<template>
  <data-tables :data="data">
    <el-table-column v-for="title in titles" :prop="title.prop" :label="title.label" :key="title.label" sortable="custom">
    </el-table-column>
  </data-tables>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              },{
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              },{
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              },{
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              }
      ],
      titles: [{
        prop: "flow_no",
        label: "NO."
        }, {
        prop: "content",
        label: "Content"
        }, {
        prop: "flow_type",
        label: "Type"
      },{
        prop: "flow_type_code",
        label: "Hehe"
      }],
    }
  }
}
</script>

使用 ElementUI 的 Table 屬性

如管網(wǎng)所說(shuō)，所有el-table的屬性都能傳到這個(gè)插件中來(lái)。方法是，使用tableProps

<template>
  <data-tables :data="data" 
    :table-props="tableProps">
  <!--這里加入 table-props 監(jiān)聽-->
    <el-table-column v-for="title in titles" :prop="title.prop" :label="title.label" :key="title.label" sortable="custom">
    </el-table-column>
  </data-tables>
</template>

<script>
export default {
  data() {
    return {
      tableProps:{
          size: 'mini', // 這里寫 el-table 的屬性和相應(yīng)設(shè)置
      },
      data: [
        {
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              },{
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              },{
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              },{
                'content': 'hello world',
                'flow_no': 'FW201601010004',
                'flow_type': 'Help',
                'flow_type_code': 'help',
              }
      ],
      titles: [{
        prop: "flow_no",
        label: "NO."
        }, {
        prop: "content",
        label: "Content"
        }, {
        prop: "flow_type",
        label: "Type"
      },{
        prop: "flow_type_code",
        label: "Hehe"
      }],
    }
  }
}