VUE 数据表

VueDataTable是一个将高级特性添加到HTML表格的Vue插件. 它的灵感来自 数据表 j 查询插件不过 使用 Vue 从头开始写.

目录

1. 特征
2. 演示
3. 开始
   • 安装
   • 设置
   • 使用
4. 配置
   • 列数
   • 兰
   • 自定义组件
5. 许可证
6. 版本
7. 捐款
8. 作者数

特征

• 多列排序
• 倾斜
• 搜索过滤器
• 导出数据( XLS、 JSON、 CVS 或 TXT)
• 自定义组件单元格
• 自定义文本

演示

查看和编辑一个软件包是否适合您需要的最好方式 演示项目。 这里有一些代码游乐场 你可以测试 VueDataTable. (原始内容存档于2018-09-29).

• Demo 1(审查)
• Demo 1(审查和代码)
• Demo 2 (审查)
• Demo 2(审查和代码)
• Demo 3(审查)
• Demo 3(审查和代码)
• Demo 4(审查)
• Demo 4(审查和代码)
• Demo 5(审查)
• Demo 5(审查和代码)

Demo 1 和 Demo 2 都来自这个插件的更古老的版本, 但应该仍然有效 由于API没有太大变化,因此有了更新的版本. 3号是最新的 版本,并有一个自定义页脚组件的例子。 Demo 4 执行大众选举 使用自定义组件和复选框的行。 Demo 5 使用自定义加载组件 在数据被装入时向用户显示.

开始

安装

npm install --save @andresouzaabreu/vue-data-table

设置

import DataTable from "@andresouzaabreu/vue-data-table";
Vue.component("data-table", DataTable);

别忘了加入样式表

import "@andresouzaabreu/vue-data-table/dist/DataTable.css";

使用

<template>
    <div>
        <data-table v-bind="bindings"/>
    </div>
</template>
<script>
export default {
    computed: {
        bindings() {
            return {
                columns: [/*the columns*/]
                data: [/*the data*/]
                /* other props...*/
            }
        }
    },
}
</script>

说明 注意 v- bind 将带走对象中的所有密钥值对( in 这个案子 bindings),并把它们作为道具传递到VueDataTable. 这么说吧, 这是一次通过多个道具的捷径 .

配置

仅 data 电子 columns 需要这样做。 其他道具是可选的.

列数

若为 columns 没有定义, 那么 columnKeys 必须被定义,并且将会是 绘制为 columns 带有默认参数的矩阵。 示例

// we can define the columns
config = {
    data: users,
    columns: [
        {
            key: "name",
        },
        {
            key: "email",
            title: "Email Address",
            sortable: false,
        },
        {
            key: "phone",
            sortable: false,
            searchable: false,
            /* this will make this column appear to the right of the table
            since its index is greater than others*/
            index: 100,
        },
        {
            key: "permissions",
            /* custom function sort users by which user has more permissions */
            sortingFunction: function(a, b) {
                // permissions is an array
                return a.permissions.length - b.permissions.length;
            },
            /* custom component to display the permissions */
            component: UserPermissionList,
        }
    ]
}

// or use columnKeys shortcut
config = {
    data: user,
    columnKeys: ["name", "email", "registered_at", "last_access_at"]
},

// which will take the default column and map the array into this
[
    {
        key: "name",
        title: "Name",
        sortable: true,
        searchable: true,
        index: 0
    },
    {
        key: "email",
        title: "Email",
        sortable: true,
        searchable: true,
        index: 0
    },
    {
        key: "registered_at",
        title: "Registered at",
        sortable: true,
        searchable: true,
        index: 0
    },
    {
        key: "last_access_at",
        title: "Last access at",
        sortable: true,
        searchable: true,
        index: 0
    },
]

自定义组件

在上述例子中,我们使用了一个自定义组件"UserPermissionList". 下面是该自定义组件的样本.

<template>
    <div>
        List of permissions for the user {{ data.name }} :
        <ul>
            <li v-for="(permission, i) in data.permissions" :key="i">
                {{ permission }}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "UserPermissionList",
    props: {
        data: {
            type: Object,
            required: true
        }
    }
}
</script>

另一个实例, 使用动作按钮 :

<template>
    <div class="action-buttons">
        <button class="btn btn-outline-success" @click="handleAction('view')">
            <i class="fa fa-eye"></i>
        </button>
        <button class="btn btn-outline-primary" @click="handleAction('edit')">
            <i class="fa fa-edit"></i>
        </button>
        <button class="btn btn-outline-dark" @click="handleAction('delete')">
            <i class="fa fa-trash"></i>
        </button>
    </div>
</template>
<script>
export default {
    name: "ActionButtons",
    methods: {
        handleAction(actionName) {
            /* when the user clicks a button, that will trigger a mutation on our Vuex store
            The mutation may show a form for editing a resource, or maybe a popup box asking
            the user to confirm deleting a resource, or open a new page for the user to view
            a resource.
             */
            this.$store.commit(actionName, this.data)
        }
    },
    props: {
        data: {
            type: Object,
            required: true,
        },
    },
};
</script>

文本

目前,VueDataTable有三种语言的支持:英语(en), 巴西葡萄牙语(pt-br)和西班牙语(s. 这个 lang 道具指定在 在表格中显示文本的语言.

如果我们想要添加自定义文本( 可能是因为没有语言支持或 因为我们想要别的东西, 我们必须把它放在 text 道具 (英语).

下表列出我们可以自定义的文本及其默认值 使用英语.

说明: 通知占位符 :first, (中文(简体) ), :last, (中文(简体) ), :total,以及 filtered 将自动替换为适当的数字.

示例代码 :

parameters() {
    return {
        data: [/**/],
        columns: [/**/],
        text: {
            PerPageText: "Number of users per page :entries",
            infoText: "Displaying :first to :last of :total users",
            emptyTableText: "No users found :(",
        }
    }
}

添加全局自定义语言

如果您的lang尚未支持, 您可以添加新语言并在任意语言中使用 VueDataTable 实例如下:

import { languageServiceProvider } from "@andresouzaabreu/vue-data-table";
const loremIpsumLanguage = {
    perPageText: "lorem ppsum",
    nextButtonText: "labore nostrud",
    /* more ... */
};
languageServiceProvider.setLang("lorem", loremIpsumLanguage)

/**
 * @function setLang
 * @param {String} lang           the name of the language
 * @param {Object} translations   an object with the translated text
*/

您也可以修改任何对现有语言的默认文本,该文本将 反映全球的变化。 例如:

// the default text for the download button in the export component is "export as"
// we may want change that to "download as"
languageServiceProvider.setLangText("en", "downloadText", "download as:")

/**
 * @function setLangText
 * @param lang
 * @param {String} key     the key in the lang object
 * @param {String} text    the text will be display to the user
*/

组件的自定义顺序

VueDataTable 使用 CSS 的网格显示来指定其组件的位置 (搜索过滤器,页码,条目信息,每个页面选项,下载按钮).

我们可以通过包括我们的习惯来明确组件的位置 CSS/SCSS 并压倒默认值.

默认情况下, VueDataTable 如何显示组件 :

.data-table {
    display: grid;
    width: 100%;
    grid-template-columns: 25% 25% 25% 25%;
    &> div {
        margin-top: 1rem;
        max-width: 100%;
    }
    & > .data-table-search-filter, .data-table-pagination, .data-table-export-data {
        margin-left: auto
    }
    @media (min-width: 1401px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "info pagination pagination download";
    }
    @media (min-width: 1051px) AND (max-width: 1400px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "info pagination pagination pagination"
            ". . download download";
    }
    @media (min-width: 851px) AND (max-width: 1050px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "pagination pagination pagination pagination"
            "info info download download";
    }
    @media (max-width: 800px) {
        & > .data-table-pagination {
            flex-wrap: wrap;
        }
    }
    @media (min-width: 651px) AND (max-width: 850px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "pagination pagination pagination pagination"
            "info info info info"
            "download download download download";
    }
    @media (max-width: 650px) {
        grid-template-areas:
            "search search search search"
            "perPage perPage perPage perPage "
            "table table table table"
            "pagination pagination pagination pagination"
            "info info info info"
            "download download download download";
        & > .data-table-per-page {
            margin-left: auto
        }
    }
}

请随意复制上面的样式,修改它,然后设置位置 组件.

自定义组件

除每个列的自定义组件外, 您还提供自定义组件 桌子的页脚,柱子的 sorting icon (如果 栏目排序,栏目 sorting index 联合国 当前列如果正在排序,并启用多列排序.

页脚

财产 footerComponent 设置要制作表脚的组件. 元件可以是元件,也可以是元件 Object,或一个 String 等于 注册组件的名称.

这个 footerComponent 一定是个 <tfoot> HTML 元素及其必须具有 属性 data, (中文(简体) ), dataDisplayed, (中文(简体) ), dataFiltered如果组件不 在 propsVue可能认为他们是一些 自定义 HTML 属性及其值将显示为 HTML 属性,该属性 真的很乱.

财产 data 对应所有传送到VueDataTable的数据。 这个 dataDisplayed 对应当前可见的所有数据. 这个 dataFiltered 对应于所有通过查询过滤的数据. 这些属性可用于进行共通操作,例如计算 某个列的总行值的总和.

示例

假设我们有一桌水果。 这个 data 是一系列对象 其财产为 name, (中文(简体) ), price,以及 amount我们可以提供一种习惯 页脚,以显示所购水果的总额和总价格.

脚印部分是:

<template>
  <tfoot v-show="dataDisplayed.length > 0">
    <td>Total</td>
    <td></td> 
    <td>{{ totalAmount }}</td> 
    <td>{{ totalPrice }}</td>
  </tfoot>  
</template>
<script>
export default {
  name: "TableFooter",
  computed: {
    totalPrice() {
      let s = 0;
      for (let f of this.dataDisplayed)
        s += f.price * f.amount;
      return s;
    }, 
    totalAmount() {
      let s = 0;
      for (let f of this.dataDisplayed)
        s += f.amount;
      return s;
    }
  },
  props: {
    data: Array,
    dataDisplayed: Array,
    dataFiltered: Array,
  }
}
</script>

我们通过这个部分如下:

<template>
    <data-table v-bind="tableProps"/>
</template>
<script>
import TableFooter from './TableFooter.vue'

export default {
    /* ... some code */
    data() {
        return {
            tableProps: {
                columns: [ /* ... code */ ],
                data: [ /* ... more code */ ],
                footerComponent: TableFooter,
            }
        }
    }
}
</script>

换句话说,您可以注册组件并传递字符串 :

/* earlier on */
import TableFooter from './TableFooter.vue'
Vue.component("table-footer", TableFooter)

/* later on */
    footerComponent: "table-flooter"

排序图标

默认情况下, VueDataTable 将显示箭头以指示排序方向 当排序一个列。 这个 SortingIcon 组件被包裹在一个 th 键。 这个 th 元素有一个 data-sorting 属性,可能是 asc 或者说 desc 只有这个 基于这个数值,我们显示一个 arrow_up 或一个 arrow_down 图标使用 CSS 规则.

<template>
    <span class="data-table-sorting-icon">&nbsp;</span>
</template>
<style lang="scss" scoped>
.data-table-sorting-icon {
    &::after {
        content: "\2193";
    }
    &::before {
        content: "\2191";
    }
    &::after, &::before {
        opacity: 0.5;
    }
    [data-sorting="asc"] &::before, [data-sorting="desc"] &::after {
        opacity: 1;
    }
}
</style>

说明:一些代码被省略以保持其清洁.

如果我们想添加我们的定制图标,那么我们可以注册我们的 组件.

import SortingIcon from "./path/to/SortIcon.vue";

export default {
    computed: {
        bindings() {
            return {
                SortingIconComponent: SortingIcon,
                data: [],
                /**/
            };
        }
    }
}

排序索引图标

当排序多列时, VueDataTable 将显示带有索引的图标 显示在排序过程中哪个列具有优先级.

<template>
    <span class="data-table-sort-index">
        {{ index }}
    </span>
</template>

如果我们想加入我们自己的组件, 我们可以注册它就像我们 以前有过.

import SortingIndex from "./path/to/SortingIndex.vue";

export default {
    computed: {
        bindings() {
            return {
                SortingIndexComponent: SortingIndex,
                data: [],
                /**/
            };
        }
    }
};

在我们 SortingIndex 成分,我们必须有一个 index 属性,哪些 排序过程中列索引的通讯员.

export default {
    name: "SortingIndex",
    props: {
        index: {
            type: Number,
            required: true
        }
    }
};

许可证

麻省理工学院

版本

这个项目使用 交换器。 。 。 .

捐款

拉动请求是非常受欢迎的.