avue去除table表格操作列

过程

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-pickerv-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-optionv-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() + 1endMonth = 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 隐藏操作列

并不是这一种方法，我是看得网上的，我组长没这么写，也没有空白的一列，

小白一枚，大神绕道

avue去除table表格操作列相关推荐

Layui table表格操作列，按钮过多时展开点击失效问题解决方法
// 缓存当前操作的是哪个表格的哪个tr的哪个td $(document).off('mousedown','.layui-table-grid-down') .on('mousedown','.la ...
el-table表格操作列合并行
前言: 在使用el-table的时候经常会涉及到表格的列合并,包括表格操作列的合并,本篇博客主要讲的是表格操作列的合并,至于其他列的合并可以参考另一篇博客:https://editor.csdn.ne ...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽
业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作... 写死宽度时是这样的: 开始给操作列绑定宽度属性 :width=&quo ...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽代码示例
本篇文章小编给大家分享一下解决elementui表格操作列自适应列宽代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 写死宽度时是这样的: 开始 ...
elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
ant vue table表格隐藏列
ant vue table表格隐藏列随手记一下
原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
react+antd表格操作列加Dropdown和menu写法
需求:表格的每行操作里,有一个Dropdown组件,里面是menu组件,这里在列进行渲染的时候,把行数据传给menu,menu被点击的时候获取到行数据进行弹框展示代码分析: 1.表格的列渲染操作列的 ...
table表格竖列横排显示
此段代码可以让表格的竖列变成横列显示,如果表格已经渲染好,此时需求需要你横排显示竖列的内容,就可以用到先在HTML中写一个表格 <table class="table table-b ...

avue去除table表格操作列

avue去除table表格操作列相关推荐

最新文章

热门文章