avue去除table表格操作列
<template><el-drawer size="50%"v-model="visible":title="title":visible.sync="visible"><el-form :inline="true" :model="attendanceForm" size="small" style="margin-left: 38px;" ref="attend
·
过程
1.在对应的option中将设置:menu: false
2.此时操作列没有了,但是可能会变成一个空列,那可能是你option里的column中的lable设置了width,此时把这些width都去掉,让框架自适应宽度就可以消除空列,如图
最终让它变成这样就可以了
完整代码如下
<template>
<el-drawer size="50%"
v-model="visible"
:title="title"
:visible.sync="visible">
<el-form :inline="true" :model="attendanceForm" size="small" style="margin-left: 38px;" ref="attendanceForm" class="attendanceForm">
<el-form-item label="查询月份: ">
<el-form-item prop="queryMonth">
<el-date-picker
v-model="attendanceForm.queryMonth"
size="small"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</el-date-picker>
</el-form-item>
</el-form-item>
<el-form-item label="所属部门: " prop="deptId">
<el-select v-model="attendanceForm.deptId" prop="deptId" placeholder="请选择所属部门">
<el-option
v-for="item in treeDept"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" style="margin-left: 15px" @click="searchChange()">查询</el-button>
<el-button type="plain" size="small" style="margin-left: 15px" @click="searchReset()">清空</el-button>
</el-form-item>
</el-form>
<avue-crud v-model="form"
class="scroll-bar"
:data="list"
:option="option"
:permission="permissionList"
@selection-change="selectionChange">
</avue-crud>
</el-drawer>
</template>
<script>
import {mapGetters} from "vuex";
import {DICT,tree_dept} from "@/util/mixins";
import {attendanceDeptList} from "@/api/resource/staff";
export default {
name: "attendance-dept-list",
props: {
data: {},
value: false
},
data() {
return {
visible: false,
title: "考勤汇总列表",
form: {},
attendanceForm: {
queryMonth: [],
deptId: ''
},
treeDept: tree_dept,
option: {
tip: false,
border: true,
index: true,
selection: true,
refreshBtn: false, //去掉table表格上的刷新按钮
columnBtn: false,
addBtn: false, //去掉table表格上的新增按钮
menu: false,
maxHeight: 300,
menuWidth: 160,
dialogWidth: 450,
column: [
{label: "部门名称", prop: "deptName", overHidden: true, display: false},
{label: "人员工号", prop: "number", display: false},
{label: "人员姓名", prop: "username", display: false},
{label: "岗位名称", prop: "title", type: "select", dicData: DICT.jobTitles, overHidden: true, display: false},
{label: "打卡次数", prop: "signedCount",slot: true, display: false},
]
},
list: [],
selectionList: []
};
},
computed: {
...mapGetters(["permission"]),
permissionList() {
return {
addBtn: false, //列上的添加
viewBtn: false, //列上的查看
delBtn: false, //列上的删除
editBtn: false //列上的删除
};
},
ids() {
return this.selectionList.map(ele => ele.id);
}
},
created() {
this.option.maxHeight = window.innerHeight - 145;
window.onresize = () => {
return (() => {
this.option.maxHeight = window.innerHeight - 145;
})();
};
this.treeDept = tree_dept;
this.onLoad();
},
watch: {
value(val) {
this.visible = val;
},
visible(val) {
this.$emit("input", val);
}
},
methods: {
selectionChange(list) {
this.selectionList = list;
},
searchReset() {
this.$refs.attendanceForm.resetFields();
this.onLoad();
},
searchChange() {
this.onLoad();
},
onLoad() {
let params = {};
if(!this.validatenull(this.attendanceForm.queryMonth) && this.attendanceForm.queryMonth.length > 0){
let startDate = this.attendanceForm.queryMonth[0];
let startMonth = startDate.getMonth() + 1;
startMonth = startMonth < 10 ? "0"+startMonth : startMonth;
let startYear = startDate.getFullYear()
let endDate = this.attendanceForm.queryMonth[1];
let endMonth = endDate.getMonth() + 1
endMonth = endMonth < 10 ? "0" + endMonth:endMonth;
let endYear = endDate.getFullYear()
params["month_ge"] = startYear + "-" + startMonth;
params["month_lt"] = endYear + "-" + endMonth;
}
if(!this.validatenull(this.attendanceForm.deptId) && this.attendanceForm.deptId !== ''){
params["deptId_eq"] = this.attendanceForm.deptId;
}
attendanceDeptList(params).then(res => {
this.list = res.data;
});
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .avue-crud__menu {
display: none;
}
.el-range-editor--small.el-input__inner {
width: 200px;
height: 32px;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 8px;
}
</style>
推荐博客
avue crud组件隐藏table操作一栏_朝花夕拾的博客-CSDN博客_avue 隐藏操作列
并不是这一种方法,我是看得网上的,我组长没这么写,也没有空白的一列,
小白一枚,大神绕道
更多推荐
已为社区贡献3条内容
所有评论(0)