1. v-ele

v-ele

vEle

Vue封装ElementUI,快捷数据驱动开发。

安装

npm install v-ele element-ui -S

使用简介

使用之前,项目main文件需要配置如下:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import vEle from 'v-ele'

Vue.use(ElementUI);
Vue.use(vEle);

v-ele-search

template

 <v-ele-search :options="searchOptions" @search="search" @enter="search" @change="search">
 </v-ele-search>

事件触发

事件名 说明
search 搜索事件
enter 表单回车事件

options配置

字段 可选 类型 默认 说明
response 必须 Object {search: {}} 引用数据
items 必须 Array [] 字段项配置
buttons 可选 Array [] el-button按钮配置

items字段项配置

字段 可选 类型 说明
title 必须 string 字段名称
field 必须 string 双向绑定字段
type 必须 string input|select|daterange
options select非远程必须 Object 下拉框select列表options,例如:{key: 'id',rows:[{id: 1, title: '1'}]}
remoteMethod select远程必须 select远程回调事件,事件返回:{item, query},请求结果用this.$set(item['options'], 'rows', list)更新下拉框select列表options
filterable select远程必须 Boolean true
remote select远程必须 Boolean true
clearable select远程必须 Boolean true
... 其他element-ui参数

例子

searchOptions: {
response: {search: {}},
items: [
  {title: '昵称', field: 'nickname', type: 'input'},
  {title: '性别', field: 'gender', type: 'select', options: {rows: []}},
 ]
}

method,请求后端拿到数据给v-ele-table中的options配置tableOptions.data

search() {
    this.$http.get('/staff/select').then(res => {
        this.tableOptions.data = res.data.data.list;
    }).catch(() => {
    });
}

v-ele-table

template

<v-ele-table :options="tableOptions" @sortChange="search">
</v-ele-table>

options

字段 可选 类型 默认 说明
data 必须 Array [] 列表数据
response 必须 Object {} 引用数据
cols 必须 Array [] 表头
sortChange 可选 String sortChange 排序事件名
border 可选 element-ui参数
stripe 可选 element-ui参数
height 可选 element-ui参数
maxHeight 可选 element-ui参数
defaultSort 可选 element-ui参数
showOverflowTooltip 可选 element-ui参数
showSummary 可选 element-ui参数
sumText 可选 element-ui参数
summaryMethod 可选 element-ui参数
... 其他element-ui参数

cols

字段 可选 类型 默认 说明
prop 必须 string element-ui参数
label 必须 string element-ui参数
buttons 可选 Array [] el-button按钮组
width 可选 element-ui参数
type 可选 element-ui参数
sortable 可选 element-ui参数
fixed 可选 element-ui参数
sortBy 可选 element-ui参数
sortMethod 可选 element-ui参数
formatter 可选 element-ui参数
... 其他element-ui参数

buttons

字段 可选 类型 默认 说明
click 必须 string|Function click 区分返回事件名,比如:@delete,@edit
type 可选 element-ui参数
size 可选 element-ui参数
icon 可选 element-ui参数
... 其他element-ui参数