mouse-vue-module
v0.1.5
Published
1.install SDK using npm ``` npm install mouse-vue-module --save ``` 2.for example: ```js //main.js 执行 import install from 'mouse-vue-module' Vue.use(install); ``` ```js //列表 搜索、列表、分页封装 //搜索组件 input、select、date searchLst = [ { label:'名称:',//form
Downloads
4
Readme
Basic usage
1.install SDK using npm
npm install mouse-vue-module --save
2.for example:
//main.js 执行
import install from 'mouse-vue-module'
Vue.use(install);
//列表 搜索、列表、分页封装
//搜索组件 input、select、date
searchLst = [
{
label:'名称:',//form表单 label参数
model:'id',//v-model 参数
type:'select',//搜索类型 'input','select','date'
lst:[],//select 类型 必传
name:'id',//搜索对应字段
style:'',//搜索样式
clearable:false,//清除
},
{
label:'时间:',//form表单 label参数
model: [startTime, endTime],//日期 默认时间
type:'date',//日期类型
name:'updateTimeList',//搜索对应字段
style:'',//搜索样式
clearable:false,//清除
}
]
//搜索按钮
searchBtns = [
{
isShow:true,//是否显示 权限配置
name:'查 询',//按钮名称
loading:false,//按钮loading
style:'',//样式
type:'search',//类型
api:page,//接口 函数
},
{
isShow:true,//是否显示 权限配置
name:'导 出',//按钮名称
loading:false,//按钮loading
style:'',//样式
type:'export',//类型
api:exportFile //接口 函数
},
],//搜索按钮
//接口搜索条件
param = {
id:1,
updateTimeList:[startTime, endTime],
}
//按钮点击的回调 res 接口返回数据 o 哪一个按钮点击
btnClick(res,o){
console.log(res,o);
}
//搜索框值、分页值改变
handleChange(val,attribute){
this.param[attribute] = val;
}
<mouse-search
:searchLst="searchLst"
:btns="searchBtns"
:param="param"
@click="btnClick"
ref="mouseSearch"
@handleChange="handleChange"
></mouse-search>
//table 分页
//table表头
tableHeader:[
{
type:'index',
width:'50',
label:'序号',
prop:'',
showOverflowTooltip:true,
},
{
width:'150',
label:'日期',
prop:'date',
showOverflowTooltip:true,
},
{
width:'100',
label:'操作',
fixed:'right',
operate:[
{
type: 'primary',
underline: false,
name: '查看',
style: '',
click: (row) => {
console.log(row);
}
},
{
type: 'primary',
underline: false,
name: '查看',
style: '',
click: (row) => {
console.log(row);
}
}
]
},
//搜索框值、分页值改变
handleChange(val,attribute){
this.param[attribute] = val;
}
<mouse-table
:loading="searchBtns[0].loading"//loading 搜索数据 searchBtns里搜索的值
:headerCellStyle="{background:'#f5f8ff',color:'#333333'}"//headerCellStyle table 头部样式
:height="height"//table高度
:tableHeader="tableHeader"//table表头
:tableList="tableList"//table数据
:param="param"//搜索条件
:totalPage="totalPage"//table数据总数
@handleChange="handleChange">
</mouse-table>