vue uikit
vue-uikit-datatable (vue-uikit-datatable)
A Simple Datatable for the UiKit 3.0 Framework.
UiKit 3.0框架的简单数据表。
For npm:
对于npm:
npm install vue-uikit-datatable
For yarn
纱线用
yarn add vue-uikit-datatable
使用 (To Use)
Import the Datatable by using
通过使用导入数据表
import Vue from 'vue'
import Datatable from 'vue-uikit-table'
Vue.use(Datatable)
基本范例 (Basic Example)
<template>
<section class="uk-container uk-section">
<Datatable :titles="titles" :itemList="usersList"></Datatable>
</section>
</template>
<script>
const titles = [
{
prop: "username",
name: "Username"
},
{
prop: "email",
name: "Email"
},
{
prop: "gender",
name: "Gender"
}
];
const usersList = [
{
"id": "1",
"username": "hirthe.alyson",
"email": "[email protected]",
"gender": "male",
},
{
"id": "2",
"username": "oklein",
"email": "[email protected]",
"gender": "male",
},
{
"id": "3",
"username": "bahringer.leonel",
"email": "[email protected]",
"gender": "female",
}];
export default {
name: "UserControls",
data() {
return {
titles,
usersList
};
},
methods: {
}
};
</script>
对于复选框选择 (For Checkbox selection)
Checkbox selection is on by default, remove it by using the prop checkbox-filter
默认情况下,复选框选择处于启用状态,请使用prop checkbox-filter
将其删除
:checkbox-filter=false
To process get the items selected, add selected-change
要处理以获取选定项目,请添加selected-change
@selected-change='function-to-handle-selected-items'
例 (Example)
<Datatable :checkbox-filter=true @selected-change='selected'></Datatable>
data(){
items:[]
}
methods:{
selected(items) {
console.log(items);
}
}
使用搜索框 (To Use Search Box)
Add the prop search-attrs
添加道具search-attrs
:searchAttrs="columns-to-be-searched"
例 (Example)
<Datatable :search-attrs="searchAttrs"></Datatable>
<script>
export default{
data(){
return{
searchAttrs: ["username","email"],
}
}
}
</script>
翻译自: https://vuejsexamples.com/a-custom-data-table-built-using-vue-and-uikit3/
vue uikit