最近研究Vue晓避，用的Element-UI作為框架簇捍。可能是我太菜雞俏拱，感覺相比于JQuery的DataTables暑塑，Element-UI提供的表格功能太少了。找了一下午锅必，讓我找到一個比較好用的table插件事格。
詳情請關(guān)注官網(wǎng)：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搞隐。我沒做實(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)所說劣纲，所有el-table的屬性都能傳到這個插件中來逢捺。方法是，使用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"
}],
}
}
}
