Vue中类似DataTables的好用插件

最近研究Vue，用的Element-UI作为框架。可能是我太菜鸡，感觉相比于JQuery的DataTables，Element-UI提供的表格功能太少了。找了一下午，让我找到一个比较好用的table插件。

详情请关注官网：https://njleonzhang.github.io/vue-data-tables/#/quickstart

这里简单介绍一下这个插件的使用

安装

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. 如果翻页需要英文，还需要安装L10N。我没做实验，这里就不做叙述了。

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 属性

如管网所说，所有el-table的属性都能传到这个插件中来。方法是，使用tableProps

<template>
  <data-tables :data="data" 
    :table-props="tableProps">
  <!--这里加入 table-props 监听-->
    <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 的属性和相应设置
      },
      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"
      }],
    }
  }
}