vue二次封装el-table组件，增加右键菜单选择展示列。
<template>
<div class="table">
<el-table id="rateTable" :class="tableClass" v-loading="isLoading" :data="list" :stripe="options.stripe" :height="tableHeight" :row-style='getRowClass'
ref="mutipleTable" :row-key="rowkey" border :tree-props="tp" @header-contextmenu='contextmenu'
@selection-change="handleSelectionChange" @cell-click='handleCellClick' @row-dblclick='handleRowdblclick'>
<!--region 选择框-->
<el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
</el-table-column>
<!--endregion-->
<!--region 数据列-->
<template v-for="(column, index) in columns">
<el-table-column :prop="column.prop"
v-if="column.isShow"
:key='column.label'
:label="column.label"
:align="column.align"
:width="column.width">
<template slot-scope="scope">
<template v-if="!column.render">
<template v-if="column.formatter">
<span v-html="column.formatter(scope.row, column)"></span>
</template>
<template v-else>
<span :title="scope.row[column.prop]">{{scope.row[column.prop]}}</span>
</template>
</template>
<template v-else>
<expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
</template>
</template>
</el-table-column>
</template>
<!--endregion-->
<!--region 按钮操作组-->
<el-table-column ref="fixedColumn" label="操作" align="center" :width="operates.width" :fixed="operates.fixed"
v-if="operates.list.filter(_x=>_x.show === true).length > 0">
<template slot-scope="scope">
<div class="operate-group" style="overflow: auto;">
<template v-for="(btn, key) in operates.list">
<span class="item" v-if="btn.show" :key='btn.id'>
<el-button :type="btn.bgColortype" :class="btn.className" v-has="btn.hasbutton" size="mini" :disabled="btn.disabled"
@click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
</el-button>
</span>
</template>
</div>
</template>
</el-table-column>
<!--endregion-->
</el-table>
<div v-if="pageShow">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="1"
:page-sizes="[10, 20, 50, 100,110,500]"
:page-size="10"
layout="total, sizes, prev, pager, next"
:total="total"
background>
</el-pagination>
</div>
<!--右键弹出的菜单内容-->
<!--动态计算菜单出现的位置-->
<div v-show="menuVisible" :style="{top:top+ "px",left:left+ "px"}" class="menu1">
<i class="el-icon-circle-close" style="position: absolute;right: 0px;top: 0px;" @click="foo"></i>
<el-checkbox-group v-model="colOptions">
<el-checkbox v-for="item in colSelect" :key="item" :label="item" />
</el-checkbox-group>
</div>
</div>
</template>
<!--endregion-->
<script>
export default {
props: {
list: {
type: Array,
default: []
}, // 数据列表
columns: {
type: Array,
default: []
}, // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽,isShow:是否显示
operates: {}, // 操作按钮组 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
options: {
type: Object,
default: {
stripe: false, // 是否为斑马纹 table
highlightCurrentRow: false, // 是否要高亮当前行
},
}, // table 表格的控制参数
total: { // 所有条数
type: Number,
default: ()=>0
},
pageShow: { //是否显示跳转页
type: Boolean,
default: true
},
rowkey:{
type: String,
default:'id'
},
tableClass:{
type: String,
default:'tableLimit'
},
tp: {//是否有树型表格，默认有
type: Object,
default:()=> {
hasChildren: 'hasChildren';
children: 'children'
}
}
},
components: {//组件
expandDom: {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params)
}
}
},
data () {// 数据
return {
tableHeight:600,
pageIndex: 1,
multipleSelection: [], // 多行选中
menuVisible: false, //右键菜单的显示与隐藏
top: 0, //右键菜单的位置
left: 0,
colOptions: [], //多选框的选择项
colSelect: [],
}
},
mounted () {
var self=this;
// setTimeout(() => {
// self.tableHeight = window.innerHeight - self.$refs.mutipleTable.$el.offsetTop-205;
// },100)
this.$nextTick(function () {
self.options.tableHeight = window.innerHeight - self.$refs.mutipleTable.$el.offsetTop - 205;
// 监听窗口大小变化
window.onresize = function() {
self.options.tableHeight= window.innerHeight - self.$refs.mutipleTable.$el.offsetTop - 205
}
})
},
watch: {
operates(val,oldVal){
},
colOptions(newVal, oldVal) {
if (newVal) { //如果有值发生变化，即多选框的已选项变化
var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未选中
this.columns.filter(i => {
if (arr.indexOf(i.label) !== -1) {
i.isShow = false;
} else {
i.isShow = true;
}
})
}
}
},
computed: {
isLoading(){//是否显示loding
return this.total<=0 && this.options.loading;
}
},
methods: {
// 多行选中
handleSelectionChange (val) {
this.multipleSelection = val
this.$emit('handleSelectionChange', val)
},
handleCellClick(row, column, cell, event){// 当某个单元格被点击时会触发该事件
this.$emit('handleCellClick', {row, column, cell, event});
},
handleRowdblclick(row, column, event){//当某一行被双击时会触发该事件 row, column, event
this.$emit('handleRowdblclick', {row, column, event});
},
// 显示 表格操作弹窗
showActionTableDialog () {
this.$emit('handelAction')
},
handleSizeChange(val) { //每页显示多少条
this.$emit('sizeChange', val)
},
handleCurrentChange(val) { //当前多少页
this.$emit('currentPage', val)
},
clearSelection(){ //清除表格chekbox
this.$refs.mutipleTable.clearSelection();
},
getRowClass({row, rowIndex}){
//let stylejson={}
// if (row.doCount ==2) {
// stylejson.background='#909399'
// return stylejson
// } else {
// return ''
// }
},
contextmenu(row, event) {
//先把菜单关闭，目的是第二次或者第n次右键鼠标的时候 它默认的是true
// this.menuVisible = false;
// 显示菜单
this.menuVisible = true;
window.event.returnValue = false; //阻止浏览器自带的右键菜单弹出
//给整个document绑定click监听事件， 左键单击任何位置执行foo方法
// document.addEventListener('click', this.foo);
//event对应的是鼠标事件，找到鼠标点击位置的坐标，给菜单定位
this.top = event.clientY;
this.left = event.clientX;
//colSelect
if(this.columns){
this.colSelect=[];
this.columns.forEach(element => {
this.colSelect.push(element.label);
});
}
},
foo() {
this.menuVisible = false; //关闭菜单栏
//document.removeEventListener('click', this.foo); //解绑click监听，很重要，具体原因可以看另外一篇博文
}
}
}
</script>
<style scoped>
#rateTable .item{margin-right: 2px;}
.el-pagination{text-align: left;}
/* .success{background:#67C23A;border: 1px solid #67C23A;} */
.el-table{height: calc(100vh - 300px) !important;}
/* .InstrumentFaultRecordTB{height: calc(100vh - 580px) !important;} */
::-webkit-scrollbar{width: 7px;height: 7px;background-color: #F5F5F5;}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{border-radius: 10px;box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);background-color: #c8c8c8;}
.menu1{
position:fixed;
height:500px;
width:150px;
border-radius: 3px;
border: 1px solid #999999;
background-color: #f4f4f4;
padding: 10px;
z-index: 1000;
opacity: 1;
background: #fff;
text-align: left;
overflow:auto;
}
.el-checkbox{
display:block;
height:20px;
line-height:20px;
padding:0 5px;
margin-right:0;
font-size:12px;
border: 1px solid transparent;
}
.el-checkbox:hover{
border-radius: 3px;
border: 1px solid #999999;
}
</style>>
使用组件
<template>
<div id="v_ywTask">
<el-container style="height: calc(100vh - 102px); border: 1px solid #eee">
<el-aside width="250px" v-if="false">
<treeSStation @checkedNodes="getList"></treeSStation>
</el-aside>
<!-- -->
<el-container>
<el-header>
<div class="search">
<el-form :inline="true" class="demo-form-inline" >
<el-form-item label="车牌：">
<el-input v-model="queryparam.Licenseplate" placeholder="输入车牌"></el-input>
</el-form-item>
<el-form-item label="录入日期：">
<el-date-picker v-model="queryparam.startDate" type="date" placeholder="选择开始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="-">
<el-date-picker v-model="queryparam.endDate" type="date" placeholder="选择结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item class="btn">
<el-button type="primary" v-has="'ywCar_handleSearch'" icon="el-icon-search" @click="getList();">查询</el-button>
<el-button type="primary" icon="el-icon-download" @click="downExcelload();">导出</el-button>
</el-form-item>
</el-form>
</div>
<div class="tools">
<el-button size="small" v-has="'ywCar_handleSearch'" class=" el-button--iconButton" icon="el-icon-plus" style="text-overflow: initial;" @click="handleAdd">添加</el-button>
<el-button size="small" v-has="'ywCar_handleSearch'" class=" el-button--iconButton" icon="el-icon-delete" style="text-overflow: initial;" @click="handleMultiplDel">删除</el-button>
</div>
</el-header>
<el-main>
<rate-table :list="list"
@handleSelectionChange="handleSelectionChange"
@sizeChange="getSizeChange"
@handleCellClick="handleCellClick"
@currentPage="getCurrentPage"
:options="options"
:columns="columns"
:operates="operates"
:pageShow="page.pageShow"
:total="page.total"
></rate-table>
</el-main>
</el-container>
</el-container>
<div>
<el-dialog
title="运维车辆"
:visible.sync="dialogVisible"
width="50%"
>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
<el-row>
<el-col :span="12">
<div>
<el-form-item v-show="false" label="主键Id：" prop="Id">
<el-input v-model="ruleForm.Id" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="站点名称：" prop="SStation">
<rateCascader :selectOption='ruleForm.SStation' @selectOptionEvent="selectOptionEvent"></rateCascader>
</el-form-item> -->
</div>
</el-col>
<el-col :span="12">
<div>
<el-form-item label="厂牌名称：" prop="Devicename">
<el-input v-model="ruleForm.Devicename" autocomplete="off"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div>
<el-form-item label="车牌：" prop="Licenseplate">
<el-input v-model="ruleForm.Licenseplate" autocomplete="off"></el-input></el-form-item>
</div>
</el-col>
<el-col :span="12">
<div>
<el-form-item label="编号：" prop="Number">
<el-input v-model="ruleForm.Number" autocomplete="off"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div>
<el-form-item label="使用人：" prop="UsePeople">
<el-input v-model="ruleForm.UsePeople" autocomplete="off"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div>
<el-form-item label="使用日期：" prop="Usestartdate">
<el-date-picker v-model="ruleForm.Usestartdate" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div>
<el-form-item label="运维单位：" prop="UnitId">
<el-input v-model="ruleForm.UnitId" autocomplete="off"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div>
<el-form-item label="备注：" prop="Remark">
<el-input v-model="ruleForm.Remark" autocomplete="off"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div>
<el-form-item v-show="true" label="车辆照片：" prop="Id">
<rateUpload :limit='1' :Ismultiple='false' :BusinessId='ruleForm.Id' :BusinessType='1' @uploadSuccess='uploadSuccessD'></rateUpload>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div>
<el-form-item v-show="true" label="行驶证：" prop="Id">
<rateUpload :limit='1' :Ismultiple='false' :BusinessId='ruleForm.Id' :BusinessType='2' @uploadSuccess='uploadSuccessX'></rateUpload>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="9"> </el-col>
<el-col :span="6">
<div>
<el-form-item>
<el-button v-has="'ywCar_handleSubmit'" type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</div>
</el-col>
<el-col :span="9"> </el-col>
</el-row>
</el-form>
</el-dialog>
</div>
</div>
</template>
<script>
import treeSStation from '../common/treeSStation' //引入treeSStation组件
import rateTable from '../common/rateTable' //引入rateTable组件
import rateCascader from '../common/rateCascader' //引入rateCascader组件
import rateUpload from '../common/rateUpload' //引入rateCascader组件
export default {
name:'运维车辆',
data() {
return {
dialogVisible: false,
ruleForm: {
Id: '',
City: '',
SStation: '',
SStationName: '',
Devicename: '',
Licenseplate: '',
Number: '',
UsePeople: '',
Usestartdate: '',
Usedeadline: '',
Entryperson: '',
Entrytime: '',
Remark: '',
LicensePlateFileName: '',
LicensePlateFileUrl: '',
DrivingLicenseFileName: '',
DrivingLicenseFileUrl: '',
UnitId: '',
Base64_D:'',
Base64_X:'',
OptType:1,
},
rules: {
Id:[{ required: false, message: '', trigger: 'blur' }],
SStation: [{ required: false, message: '请选择站点', trigger: 'blur' }],
Devicename: [{ required: true, message: '请输入厂牌名称', trigger: 'blur' }],
Licenseplate: [{ required: true, message: '请输入车牌', trigger: 'blur' }],
Number: [{ required: true, message: '请输入编号', trigger: 'blur' }],
UsePeople: [{ required: true, message: '请输入使用人', trigger: 'blur' }],
Usestartdate: [{ required: true, message: '请输入使用日期', trigger: 'blur' }],
LicensePlateFileName: [{ required: false, message: '请上传驾驶证', trigger: 'blur' }],
LicensePlateFileUrl: [{ required: false, message: '请上传驾驶证', trigger: 'blur' }],
DrivingLicenseFileName: [{ required: false, message: '请上传行驶证', trigger: 'blur' }],
DrivingLicenseFileUrl: [{ required: false, message: '请上传行驶证', trigger: 'blur' }],
Remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
UnitId: [{ required: false, message: '请输入运维单位', trigger: 'blur' }],
},
queryparam:{
startDate:'',
endDate:'',
Licenseplate:''
},
page:{ //关于页码的相关参数
pageShow:true, //是否显示
total:0, //总条数
pageSize:10, //每页条数
pageNo:1, //第几页
},
handleSelection:[], //checkbox选中行
list:[],// table数据
options: { // table样式参数
stripe: true, // 是否为斑马纹 table
loading: true, // 是否添加表格loading加载动画
highlightCurrentRow: true, // 是否支持当前行高亮显示
mutiSelect: true, // 是否支持列表项选中功能
}, // table 的参数结束
columns: [
{prop: 'devicename',label: '厂牌名称',align: 'center',isShow:true},
{prop: 'licenseplate',label: '车牌',align: 'center',width:100,isShow:true},
{prop: 'usepeople',label: '使用人',align: 'center',isShow:true},
{prop: 'usestartdate',label: '使用日期',align: 'center',width:180,isShow:true,formatter(row, column, cellValue){
if(row.usestartdate){
return row.usestartdate.replace("T"," ").substring(0,10);
}
}},
{prop: 'licenseplatefilename',label: '行驶证',align: 'center',isShow:true,width:150,
formatter: (row, column, cellValue) => {
if(row.licenseplatefilename){
return '<a style="color:blue;">'+row.licenseplatefilename+'</a>';
}else{
return '';
}
}
},
{prop: 'drivinglicensefilename',label: '车辆照片',align: 'center',isShow:true,width:150,
formatter: (row, column, cellValue) => {
if(row.drivinglicensefilename){
return '<a style="color:blue;">'+row.drivinglicensefilename+'</a>';
}else{
return '';
}
}
},
{prop: 'entryperson',label: '录入人',align: 'center',isShow:true},
{prop: 'show_entrytime',label: '录入日期',align: 'center',width:180,isShow:true},
{prop: 'remark',label: '备注',align: 'center',isShow:true,width:200},
],// 需要展示的列
operates: { //操作栏
width:200,
fixed: 'right',
list: [
{
id:'1',
label: '编辑',
bgColortype:'success',
show: true, //是否显示按钮
className:'success', //样式类名
disabled: false, //是否禁用按钮 默认是danger的禁用样式
hasbutton:'ywCar_handleEdit',//按钮权限控制
method: (index, row) => {
this.handleEdit(index, row)
}
},
{
id:'2',
label: '删除',
show: true,
bgColortype:'danger',
className:'searchAll',
hasbutton:'ywCar_handleMultiplDel',//按钮权限控制
disabled: false,
method: (index, row) => {
this.handledel(index, row)
}
}]
}, // 列操作按钮
} //return ending
},
methods:{
filterDate(t) {
const date = new Date(t);
const y = date.getFullYear();
const M = (date.getMonth() + 1).toString().padStart(2, 0);
const d = date.getDate().toString().padStart(2, 0);
const h = date.getHours().toString().padStart(2, 0);
const mm = date.getMinutes().toString().padStart(2, 0);
const s = date.getSeconds().toString().padStart(2, 0);
return y + '-' + M + '-' + d + ' ' + h + ':' + mm + ':' + s;
},
uploadSuccessD(file){
this.ruleForm.DrivingLicenseFileName=file.fileName;
this.ruleForm.DrivingLicenseFileUrl=file.fileUrl;
},
uploadSuccessX(file){
this.ruleForm.LicensePlateFileName=file.fileName;
this.ruleForm.LicensePlateFileUrl=file.fileUrl;
},
handleCellClick(obj){//单元格单击事件处理函数
switch(obj.column.label){
case "行驶证":
if(obj.row.licenseplatefilename){
this.commonDownLoad(obj.row.licenseplatefilename,obj.row.licenseplatefileurl);
}
break;
case "车辆照片":
if(obj.row.drivinglicensefilename){
this.commonDownLoad(obj.row.drivinglicensefilename,obj.row.drivinglicensefileurl);
}
break;
default : break;
}
},
downLoad(imgUrl) {
var codeIMG1 = ''+imgUrl+'';
var a = document.createElement('a')
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || 'pic'
// 设置图片地址
a.href = codeIMG1;
// a.click();
a.dispatchEvent(event);
},
commonDownLoad(fileName,path){
var self = this;
this.$http({
method: 'GET',
url: self.api+'/api/DownLoad/commonGetDownLoadPath?partialPath='+path
}).then(res => {
if(res.data.code==200){
location.href = self.api + '/api/DownLoad/commonDownLoad?fileName='+fileName+'&path='+res.data.data;
}
}).catch(error => {
console.log(error);
});
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
var self = this;
this.$http({
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3'
},
method: 'post',
url: self.api+'/api/Yw_Vehicle/Submit',
data:self.Qs.stringify(self.ruleForm)
}).then(res => {
if(res.status==200){
self.dialogVisible=!self.dialogVisible;
self.getList();
self.$message({
message: res.data.message,
type: res.data.type //warning,success,info,error
});
}
}).catch(error => {
console.log(error);
});
} else {
return false;
}
});
},
resetForm(formName) {
this.$nextTick(()=>{
this.$refs[formName].resetFields();
})
},
handleMultiplDel() {
var self = this;
var ids = '';
if (this.handleSelection == "") {
self.$message({
message: "请选择要删除的数据！",
type: "warning" //success,warning,info,error
});
return;
}
this.handleSelection.forEach((item,index) => {
if (index != self.handleSelection.length - 1) {
ids += item.id + ','
} else {
ids += item.id;
}
});
this.$confirm('确认删除？').then(function () {
self.handlemultipl(ids);
}).catch(function () {
});
},
handlemultipl(ids){
var self = this;
this.$http({
method: 'GET',
url: self.api+'/api/Yw_Vehicle/Delmultipl?ids='+ids
}).then(res => {
if(res.status==200){
self.getList();
self.$message({
message: res.data.message,
type: res.data.type //warning,success,info,error
});
}
}).catch(error => {
console.log(error);
});
},
Singelmultipl(id){
var self = this;
this.$http({
method: 'GET',
url: self.api+'/api/Yw_Vehicle/Singelmultipl?Id='+id
}).then(res => {
if(res.status==200){
self.getList();
self.$message({
message: res.data.message,
type: res.data.type //warning,success,info,error
});
}
}).catch(error => {
console.log(error);
});
},
handleSelectionChange (val) { //checkbox选中的数据val 是选中行的所有数组
this.handleSelection=val;
},
getSizeChange(val){ //table组件发射的方法 用于改变每页数据量
this.page.pageSize=val;
//这下面需要重新调用 获取列表页的函数
this.getList();
},
getCurrentPage(val){ //table组件发射的方法 用于改变当前所在页码
this.page.pageNo=val;
//这下面需要重新调用 获取列表页的函数
this.getList();
},
handleAdd(){
this.getToFirst(0);
this.ruleForm.OptType=1;
this.dialogVisible=!this.dialogVisible;
},
handleEdit (index, row) { //操作栏编辑按钮
var self=this;
this.getToFirst(row.id);
this.ruleForm.OptType=2;
self.dialogVisible=!self.dialogVisible;
},
handledel(index, row) { //操作栏删除按钮
var self=this;
this.$confirm('确认删除？').then(function () {
self.Singelmultipl(row.id);
}).catch(function () {
});
},
getList(obj){
var self = this;
this.$http({
method: 'GET',
url: this.api+'/api/Yw_Vehicle/GetList?pagesize=' + self.page.pageSize + '&pageindex=' + self.page.pageNo+ '&startDate=' + self.queryparam.startDate + '&endDate=' + self.queryparam.endDate+ '&Licenseplate=' + self.queryparam.Licenseplate
}).then(res => {
if(res.status==200){
self.list=res.data.data;
self.page.total = res.data.count;
self.options.loading=false;
}
}).catch(error => {
console.log(error);
});
},
//下载时间
downLoadDate(){
const date = new Date();
const y =date.getFullYear();
const M = (date.getMonth()+1).toString().padStart(2,0);
const d = date.getDate().toString().padStart(2, 0);
const h = date.getHours().toString().padStart(2, 0);
const mm = date.getMinutes().toString().padStart(2, 0);
const s = date.getSeconds().toString().padStart(2, 0);
return y + M + + d + h + mm + s;
},
//导出
downExcelload(obj){
var self = this;
this.$http({
method: 'GET',
responseType: 'blob', // 表明返回服务器返回的数据类型
url: this.api+'/api/Yw_Vehicle/GetListDownLoad?pagesize=' + self.page.pageSize + '&pageindex=' + self.page.pageNo+ '&startDate=' + self.queryparam.startDate + '&endDate=' + self.queryparam.endDate+ '&Licenseplate=' + self.queryparam.Licenseplate
}).then(res => {
if(res.status==200){
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel' })
let downTime= self.downLoadDate();
const fileName = downTime +'-运维车辆使用情况手册.xls';
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
}).catch(error => {
console.log(error);
});
},
getToFirst(id){
var self = this;
this.$http({
method: 'GET',
url: this.api+'/api/Yw_Vehicle/GetToFirst?id=' + id
}).then(res => {
if(res.status==200){
self.ruleForm.Id=res.data.data.id;
self.ruleForm.City=res.data.data.city;
self.ruleForm.SStation=res.data.data.sstation;
self.ruleForm.SStationName=res.data.data.sstationname;
self.ruleForm.Devicename=res.data.data.devicename;
self.ruleForm.Licenseplate=res.data.data.licenseplate;
self.ruleForm.Number=res.data.data.number;
self.ruleForm.UsePeople=res.data.data.usepeople;
self.ruleForm.UnitId=res.data.data.unitid;
self.ruleForm.Entryperson=res.data.data.entryperson;
self.ruleForm.Usestartdate=res.data.data.usestartdate;
self.ruleForm.Usedquantity=res.data.data.usedquantity;
self.ruleForm.Entrytime=res.data.data.entrytime;
self.ruleForm.Remark=res.data.data.remark;
}
}).catch(error => {
console.log(error);
});
},
selectOptionEvent(val){
this.ruleForm.SStation=val;
},
selectSStation(){
this.$refs.cascader.selectSStation(this.ruleForm.SStation);
}
},
components:{
treeSStation,rateTable,rateCascader,rateUpload
},
mounted() {
this.getList();//调用获取列表页的方法
},
}
</script>
<style scoped>
::-webkit-scrollbar{width: 7px;height: 7px;background-color: #F5F5F5;}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{border-radius: 10px;box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);background-color: #c8c8c8;}
.el-aside {color: #333;}
.el-header{height: 100px !important;}
.el-header .search{box-sizing: border-box;border-bottom: 1px solid #eee;text-align: left;}
.el-header .search .btn{position: absolute;right: 12px;top: 2px;}
.el-header .tools{height: 40px;border: 1px solid #ccc;background: #F5F5F5;line-height: 35px;text-align: right;padding: 0px 5px;}
/* .el-main{height: calc(100vh - 336px);} */
.el-cascader,.el-cascader--medium{width: 100%;height: 28px;line-height: 28px;}
.el-date-editor,.el-input {width: 100%;}
</style>右键菜单部分代码:
<el-table @header-contextmenu='contextmenu' />
<!--右键弹出的菜单内容-->
<!--动态计算菜单出现的位置-->
<div v-show="menuVisible" :style="{top:top+ "px",left:left+ "px"}" class="menu1">
<i class="el-icon-circle-close" style="position: absolute;right: 0px;top: 0px;" @click="foo"></i>
<el-checkbox-group v-model="colOptions">
<el-checkbox v-for="item in colSelect" :key="item" :label="item" />
</el-checkbox-group>
</div>
watch: {
colOptions(newVal, oldVal) {
if (newVal) { //如果有值发生变化，即多选框的已选项变化
var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未选中
this.columns.filter(i => {
if (arr.indexOf(i.label) !== -1) {
i.isShow = false;
} else {
i.isShow = true;
}
})
}
}
},
methods:{
contextmenu(row, event) {
//先把菜单关闭，目的是第二次或者第n次右键鼠标的时候 它默认的是true
// this.menuVisible = false;
// 显示菜单
this.menuVisible = true;
window.event.returnValue = false; //阻止浏览器自带的右键菜单弹出
//给整个document绑定click监听事件， 左键单击任何位置执行foo方法
// document.addEventListener('click', this.foo);
//event对应的是鼠标事件，找到鼠标点击位置的坐标，给菜单定位
this.top = event.clientY;
this.left = event.clientX;
//colSelect
if(this.columns){
this.colSelect=[];
this.columns.forEach(element => {
this.colSelect.push(element.label);
});
}
},
foo() {
this.menuVisible = false; //关闭菜单栏
//document.removeEventListener('click', this.foo); //解绑click监听，避免内存泄漏
}
}
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
