Api
- Guidelines
- el-alert
- el-autocomplete
- el-breadcrumb
- el-button
- el-checkbox
- el-date-picker
- el-date-tiem-picker
- el-dialog
- el-dropdown
- el-form
- el-icon
- el-input-number
- el-input
- el-loading
- el-menu
- el-message-box
- el-notification
- el-pagination
- el-popover
- el-progress
- el-radio
- el-select
- el-slider
- el-switch
- el-table
- el-tabs
- el-tag
- el-time-picker
- el-tooltip
- el-tree
- el-upload
- Directives
- Filters
- Global Methods
- Cocoa App
- Instance Methods
- Instance Properties
el-tag
基础使用
1 2 3 4 5 6 | <el-tag>标签一</el-tag> <el-tag type="gray">标签二</el-tag> <el-tag type="primary">标签三</el-tag> <el-tag type="success">标签四</el-tag> <el-tag type="warning">标签五</el-tag> <el-tag type="danger">标签六</el-tag> |
可移除的标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <el-tag v-for="tag in tags" :closable="true" :type="tag.type" @close="handleClose(tag)" > </el-tag> <script> export default { data() { return { tags: [ { key: 1, name: '标签一', type: '' }, { key: 2, name: '标签二', type: 'gray' }, { key: 5, name: '标签三', type: 'primary' }, { key: 3, name: '标签四', type: 'success' }, { key: 4, name: '标签五', type: 'warning' }, { key: 6, name: '标签六', type: 'danger' } ] }; }, methods: { handleClose(tag) { this.tags.$remove(tag); } } } </script> |