vue uikit_使用vue和uikit3构建的自定义数据表

vue uikit

vue-uikit-datatable (vue-uikit-datatable)

A Simple Datatable for the UiKit 3.0 Framework.

UiKit 3.0框架的简单数据表。

View Demo 查看演示 Download Source 下载源

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