A vessel for holding table operation items.

It will stay with Vue 2.x and Element-UI

Pre-Demand

If you use On Demand for Element-UI, make sure to import the following components:

• Divider
• Link
• Dropdown
• DropdownMenu
• DropdownItem
• Icon

Install

npm install operation-vessel

Quick Start

/* main.js */
import OperationVessel from "operation-vessel";
Vue.use(OperationVessel);

<!-- xxx.vue -->
<operation-vessel>
  <el-button type="text">Detail</el-button>
  <el-button type="text">Edit</el-button>
  <el-button type="text">Delete</el-button>
  <el-button type="text">State Change</el-button>
</operation-vessel>

Attributes

| Attribute | Description | Type | Accepted values | Default | | :------------------ | :----------------------------------------------------------- | :------ | :----------------------------------------------------------- | :----------------- | | boundary | Boundary value of the more button appears | number | ≥2 | 3 | | trigger | how to trigger | string | hover / click | hover | | more-title | Name of the more button | string | — | more | | more-icon | Name of the icon to the right of the more button | string | Element-UI icons | el-icon-arrow-down | | more-icon-visible | Visibility of the icon | boolean | — | false | | dropdown-attributes | Attributes of the drop-down | object | — | — | | dropdown-menu-class | Name of the drop-down menu | string | — | — |

Slot

| name | Description | | ------- | -------------------------- | | — | Content of operation items | | divider | Content of the divider | | moreBtn | Content of the more button |

Extra Operation

If you use Custom Directives to control the display of operation items, you can try setting $FILTER

• It is a function which has two parameters. They are node and directives
• If true is returned, the operation item is displayed. Reverse hiding

If you want to adjust the default of props, you can try setting $ATTRIBUTES

• If the value of the default is Object, using function return values, such as () => ({ xxx: xxx })

/* main.js */
import OperationVessel from "operation-vessel";
Vue.use(OperationVessel, {
  $FILTER: (node, directives) => {
    if (xxx) return false

    return true
  },
  $ATTRIBUTES: {
    moreTitle: "更多"
    dropdownAttributes: () => ({ trigger: 'click' })
  }
});