最近研究Vue，用的Element-UI作为框架。可能是我太菜鸡，感觉相比于JQuery的DataTables，Element-UI提供的表格功能太少了。找了一下午，让我找到一个比较好用的table插件。
详情请关注官网：https://njleonzhang.github.io/vue-data-tables/#/quickstart
这里简单介绍一下这个插件的使用
安装
- npm命令安装
npm install vue-data-tables
- 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"
}],
}
}
}
