0.0.8 • Published 3 years ago
jm-lay-table v0.0.8
jm-table
An ui project base on Vue.js
用法
npm install jm-table --save
main.js
import JmTable from 'jm-table'
Vue.use(JmTable)
import { UTable, UTableColumn } from 'umy-ui';
Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);页面引入组件示例
<template>
<div id="app">
<Jm-table
ref="subTableInParent"
:condition="condition"
labelWidth="80px"
@selection-change="onSelectionChange"
@action-click="onClickAction"
@col-click="onColAction"
@on-query="loadData"
@upload="onUpload">
<div slot="search">
<el-col :span="8" style="width:280px">
<el-form-item label="提货单号" prop="search_LIKE_containerNo">
<el-input type="text" v-model="moreData.form['search_LIKE_containerNo']" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8" style="width:280px">
<el-form-item label="提货单号" prop="search_LIKE_containerNo">
<el-input type="text" v-model="moreData.form['search_LIKE_containerNo1']" clearable></el-input>
</el-form-item>
</el-col>
</div>
</Jm-table>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
condition: {
sortType: '-createDateTime' // 默认后端排序
iDisplayStart: 1, // 分页当前页
iDisplayLength: 5 // 分页每页长度
},
tableData: [
{
unitName: '奔友科技',
date: '2021-02-02',
daterange: '2021-02-02',
proJectTotal: '王小虎',
isNo: '是',
hehe: 'hehe',
},
{
unitName: '本有科技',
date: '2021-02-04',
daterange: '2021-02-04',
proJectTotal: '王小虎',
isNo: '否',
hehe: '1231',
},
{
unitName: '本有科技',
date: '2021-02-04',
daterange: '2021-02-04',
proJectTotal: '王小虎',
isNo: '否',
hehe: '1231',
},
{
unitName: '本有科技',
date: '2021-02-04',
daterange: '2021-02-04',
proJectTotal: '王小虎',
isNo: '否',
hehe: '1231',
},
{
unitName: '本有科技',
date: '2021-02-04',
daterange: '2021-02-04',
proJectTotal: '王小虎',
isNo: '否',
hehe: '1231',
},
{
unitName: '本有科技',
date: '2021-02-04',
daterange: '2021-02-04',
proJectTotal: '王小虎',
isNo: '否',
hehe: '1231',
},
{
unitName: '本有科技',
date: '2021-02-04',
daterange: '2021-02-04',
proJectTotal: '王小虎',
isNo: '否',
hehe: '1231',
},
],
columns: [
{
title: '输入框',
prop: 'unitName', //后台返回的key
width: '200',
required: false, //是否出现“*”
cellRender: 'input', //返回的值为text/input（输入框）/select（下拉框）/date（日期插件）
sortAbled: true, //能否排序
sortOrder: 'desc', //按照哪种方式排序
filterAbled: true, //能否过滤
filterValue: '', // 过滤改变后的值
filterPanelVisible: false, // 过滤框是否显示
filterParam: 'search_LET_status1', //过滤字段名
clickAbled: true //当前列是否可以点击
},
{
title: '日期',
prop: 'date', //后台返回的key
width: '200',
required: false, //是否出现“*”
cellRender: 'date', //返回的值为text/input（输入框）/select（下拉框）/date（日期插件）
sortAbled: true, //能否排序
sortOrder: 'asc', //按照哪种方式排序
filterAbled: true, //能否过滤
filterValue: '', // 过滤改变后的值
filterPanelVisible: false, // 过滤框是否显示
filterParam: 'search_EQ_date'
},
{
title: '日期范围',
prop: 'daterange', //后台返回的key
width: '200',
popoverWidth: 320,
required: false, //是否出现“*”
cellRender: 'daterange', //返回的值为text/input（输入框）/select（下拉框）/date（日期插件）
sortAbled: true, //能否排序
sortOrder: 'desc', //按照哪种方式排序
filterAbled: false, //能否过滤
filterValue: '',
filterValue1: '',
filterPanelVisible: false, // 过滤框是否显示
filterParam: 'search_GET_date',
filterParam1: 'search_LET_date'
},
{
title: '下拉框',
prop: 'proJectTotal', //后台返回的key
width: '300',
required: false, //是否出现“*”
cellRender: 'select',
sortAbled: false, //能否排序
sortOrder: 'none', //按照哪种方式排序
filterAbled: true, //能否过滤
filterValue: '',
filterPanelVisible: false, // 过滤框是否显示
filterParam: 'search_LET_unitName',
selectOptions: [
{
value: '1',
label: '黄金糕',
},
{
value: '2',
label: '双皮奶',
},
],
},
{
title: '下拉框对选',
prop: 'hehe', //后台返回的key
width: '',
required: false, //是否出现“*”
cellRender: 'select-multiple',
sortAbled: false, //能否排序
sortOrder: 'none', //按照哪种方式排序
filterAbled: true, //能否过滤
filterValue: '',
filterPanelVisible: false,
filterParam: 'search_LET_unitName',
selectOptions: [
{
value: '1',
label: '黄金糕',
},
{
value: '2',
label: '双皮奶',
},
]
},
{
title: '单选框',
prop: 'isNo', //后台返回的key
width: '',
required: false, //是否出现“*”
cellRender: 'radio',
sortAbled: true, //能否排序
sortOrder: 'none', //按照哪种方式排序
filterAbled: true, //能否过滤
filterValue: '',
filterPanelVisible: false,
filterParam: 'search_LET_unitName',
selectOptions: [
{
value: '1',
label: '是',
},
{
value: '0',
label: '否',
},
]
},
],
moreData: {
hasShowPage: false, //是否显示分页
totalPage: 0, // 总页数
iDisplayStart: 1, // 当前页
iDisplayLength: 10, // 每页长度
currPageParam: 'iDisplayStart', // 当前页参数
sizePagePaeam: 'iDisplayLength', // 每页长度参数
hasSearch: true, //是否显示表单搜索
form: {}, //表单搜索对象
actions: [ //操作栏显示列表
{
actionName: '编辑',
actionCode: 'edit',
actionAbled: false // 是否禁用按钮
},{
actionName: '取消',
actionCode: 'cancel',
actionAbled: false // 是否禁用按钮
}
],
hasActionsMult: true, // 是否显示批量操作栏
actionsMult: [ // 批量操列表
{
actionName: '接收',
actionCode: 'accept',
actionAbled: false // 是否禁用按钮
},{
actionName: '提交',
actionCode: 'submit',
actionAbled: false // 是否禁用按钮
},{
actionName: '导出',
actionCode: 'download',
excelName: '测试文件名', // excel导出名
map: new Map([ // excel导出数据map
["unitName", "输入框"],
["date", "日期"],
["daterange", "日期范围"],
["proJectTotal", "下拉框"]
]),
actionAbled: false // 是否禁用按钮
},{
actionName: '导入',
actionCode: 'upload',
actionAbled: false
}
],
hasActionStatus: true, // 是否显示状态检索栏
defaultSearch: 'BXZ', // 状态栏默认选中项
actionLabel: '状态', // 状态栏label,不显示则传空
filterParam: 'search_LET_status', // 状态栏后端查询字段名
actionStatus: [ // 状态栏列表
{
statusName: '不限制',
statusCode: 'BXZ'
},
{
statusName: '任务待接收',
statusCode: 'DJS'
},
{
statusName: '任务已拒绝',
statusCode: 'BJJ'
}
],
hasActionDate: true, // 是否显示日期检索栏
defaultDateSearch: { dateName: '最近三天', dateCode: '3'}, // 默认日期选中项
actionDateLabel: '放箱日期', // 日期栏label,不显示则传空
filterStartParam: 'search_GET_date', // 日期栏后端查询字段名
filterEndParam: 'search_LET_date', // 日期栏后端查询字段名
form1: { // 日期栏检索对象
search_GET_date: '',
search_LET_date: ''
},
actionDate: [ // 日期栏列表
{ dateName: '最近三天', dateCode: '3'},
{ dateName: '最近一周', dateCode: '7'},
{ dateName: '最近15天', dateCode: '15'},
{ dateName: '最近一月', dateCode: '30'},
{ dateName: '自定义', dateCode: 'ZDY'}
]
}
}
},
methods: {
loadData(val) {
console.log(val)
const form = Object.assign({...this.condition},val)
form.iDisplayStart = form.iDisplayStart-1 // 分页从0开始
getAjaxApi(form).then(res=> {
this.moreData.totalPage = res.data.iTotalRecords
this.tableData = res.data.aaData
this.refreshTable()
})
},
refreshTable() {
// 设置表头 第二个参数表示多选框列是否显示 第三个参数表示操作列是否显示
this.$refs.subTableInParent.init(this.columns, true, true)
// 设置表格数据 第二个参数：操作栏按钮列表
this.$refs.subTableInParent.load(this.tableData,this.moreData)
},
// 多选框
onSelectionChange(selectedRows) {},
// 操作栏
onClickAction(currentRow) {
console.log(currentRow)
},
// 单元格点击
onColAction(currentRow) {
console.log(currentRow)
},
onUpload(param) {
console.log(param)
}
},
mounted () {
this.loadData()
}
}
</script>