vue.js 拖拽排序_Vue.js的基本排序表

vue.js 拖拽排序

Vue排序表 (vue-sorted-table)

A plugin to turn tables into sorted tables. Supports nested object keys, custom icons and reusable components.

一个将表转换为排序表的插件。 支持嵌套的对象键，自定义图标和可重用组件。

安装 (Installation)

Install with NPM:

使用NPM安装：

npm install --save vue-sorted-table

Import globally in app:

在应用程序中全局导入：

import SortedTablePlugin from "vue-sorted-table";

Vue.use(SortedTablePlugin);

例子 (Examples)

基本的 (Basic)

The basic example shows how to use the SortedTable and SortLink components:

基本示例显示了如何使用SortedTable和SortLink组件：

<template>
  <div id="app">
    <SortedTable :values="values">
      <thead>
        <tr>
          <th scope="col" style="text-align: left; width: 10rem;">
            <SortLink name="id">ID</SortLink>
          </th>
          <th scope="col" style="text-align: left; width: 10rem;">
            <SortLink name="name">Name</SortLink>
          </th>
          <th scope="col" style="text-align: left; width: 10rem;">
            <SortLink name="hits">Hits</SortLink>
          </th>
        </tr>
      </thead>
      <tbody slot="body" slot-scope="sort">
        <tr v-for="value in sort.values" :key="value.id">
          <td>{{ value.id }}</td>
          <td>{{ value.name }}</td>
          <td>{{ value.hits }}</td>
        </tr>
      </tbody>
    </SortedTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      values: [
        { name: "Plugin Foo", id: 2, hits: 33 },
        { name: "Plugin Bar", id: 1, hits: 42 },
        { name: "Plugin Foo Bar", id: 3, hits: 79 }
      ]
    };
  }
};
</script>

The SortedTable tag requires a values property, which is an array of objects which contain the data:

SortedTable标记需要一个values属性，该属性是包含数据的对象的数组：

<SortedTable :values="values">
</SortedTable>

The SortLink tag adds a link to sort the provided data. In the case the name property value is the current sorting, the component adds a sort icon, depending on the actual order:

SortLink标记添加一个链接以对提供的数据进行排序。 如果name属性值为当前排序，则组件将根据实际顺序添加一个排序图标：

<SortLink name="id">ID</SortLink>

The sorted data is made accessible as a scoped slot. Therefore the tbody tag is served as part of the body slot and has the slot scope sort:

排序后的数据可作为作用域插槽访问。 因此， tbody标签用作body插槽的一部分，并且具有插槽范围sort ：

<tbody slot="body" slot-scope="sort">
</tbody>

Now we can access the slot scope via sort and iterate over the sorted values to render the data:

现在，我们可以通过sort访问插槽范围并遍历排序后的值以呈现数据：

<tr v-for="value in sort.values" :key="value.id">
  <td>{{ value.id }}</td>
  <td>{{ value.name }}</td>
  <td>{{ value.hits }}</td>
</tr>

高级 (Advanced)

The advanced example is based on the basic example. It shows how to use the plugin configuration to set global sort icons:

高级示例基于基本示例。 它显示了如何使用插件配置来设置全局排序图标：

Vue.use(SortedTablePlugin, {
  ascIcon: '<i class="material-icons">arrow_drop_up</i>',
  descIcon: '<i class="material-icons">arrow_drop_down</i>'
});

嵌套值 (Nested values)

By default, the objects containing the values has to be a flat object. To support nested objects ({ name: "Plugin Foo", user: { id: 1, name: "David Campbell" } }) the plugin uses lodash.

默认情况下，包含值的对象必须是平面对象。 为了支持嵌套对象( { name: "Plugin Foo", user: { id: 1, name: "David Campbell" } } )，该插件使用lodash 。

At first, install lodash:

首先，安装lodash：

npm install --save lodash

Import lodash and register Vue prototype:

导入lodash并注册Vue原型：

import _ from "lodash";

Vue.prototype.$_ = _;

Add sort link using the nested key:

使用嵌套键添加排序链接：

<SortLink name="user.name">Username</SortLink>

Extend v-for loop to render nested value:

扩展v-for循环以呈现嵌套值：

<tr v-for="value in sort.values" :key="value.id">
  <td>{{ value.id }}</td>
  <td>{{ value.name }}</td>
  <td>{{ value.hits }}</td>
  <td>{{ value.user.name }}</td>
</tr>

单个文件组件 (Single File Components)

The SortedTable and SortLink components can be used without registering the plugin. Import the components, e.g. as part of a singe file component:

无需注册插件即可使用SortedTable和SortLink组件。 导入组件，例如作为singe文件组件的一部分：

import { SortedTable, SortLink } from "vue-sorted-table";

Register components locally:

在本地注册组件：

export default {
  name: "App",
  components: {
    SortedTable,
    SortLink
  },
  data: function() {
    return {
        // ..
    };
  }
};

Add sort icons as property of the SortedTable tag:

将排序图标添加为SortedTable标记的属性：

<SortedTable
  :values="values"
  ascIcon="<span> ▲</span>"
  descIcon="<span> ▼</span>"
>
  <!-- .. -->
</SortedTable>

组态 (Configuration)

The plugin configuration allows to set global sort icons, e.g. Advanced Example

插件配置允许设置全局排序图标，例如“ 高级示例”

Option	Description
ascIcon	Ascending sort icon.
descIcon	Descending sort icon.

选项	描述
ascIcon	升序排序图标。
descIcon	降序排序图标。

组件 (Components)

SortedTable (SortedTable)

The SortedTable is the main component of the plugin. It is intended to be a replacement of the <table></table> tag. So instead using the old table tags, use <SortedTable></SortedTable>.

SortedTable是插件的主要组件。 它旨在替代<table></table>标记。 因此，请使用<SortedTable></SortedTable>代替旧表标签。

物产 (Properties)

This component has the following properties:

该组件具有以下属性：

Property	Required	Default	Description
values	yes	null	Array of objects containing the values which should be sorted.
dir	no	asc	Sort direction. Valid values: ("asc"|"desc")
sort	no	id	Default sorting. Could be any valid object key.
ascIcon	no		Ascending icon. Overwrites default or globally set icon.
descIcon	no		Descending icon. Overwrites default or globally set icon.

属性	需要	默认	描述
values	是	空值	包含应排序值的对象数组。
dir	没有	升序	排序方向。 有效值：(“ asc” |“ desc”)
sort	没有	ID	默认排序。 可以是任何有效的对象密钥。
ascIcon	没有		升序图标。 覆盖默认或全局设置的图标。
descIcon	没有		降序图标。 覆盖默认或全局设置的图标。

SortLink (SortLink)

This component adds a link to sort the given values. A sort icon is attached automatically to link.

该组件添加了一个链接以对给定值进行排序。 排序图标会自动附加到链接。

物产 (Properties)

This component has the following properties:

该组件具有以下属性：

Property	Required	Default	Description
name	yes		The object key name on which the values will be sorted.

属性	需要	默认	描述
name	是		将对值进行排序的对象键名称。

约束 (Constraint)

Currently, the SortLink component expects to be a child of the SortedTable component. Adding any other component in between will break the sorting capabilities.

当前， SortLink组件期望是SortedTable组件的SortedTable 。 在两者之间添加任何其他组件将破坏排序功能。

翻译自: https://vuejsexamples.com/a-basic-sorted-table-for-vue-js/

vue.js 拖拽排序