el-table 复杂表头行内增删改代码示例
效果如图
<template>
<div class="app-container">
<el-card class="box-card item">
<div slot="header" class="clearfix" @click="showCondition = !showCondition">
<span>
<i class="el-icon-search">i>
{{ $t("commom.selectCondition") }}
span>
<el-button style="float: right; padding: 3px 0" type="text">
<i class="el-icon-arrow-up" v-bind:class="showCondition ? 'active' : ''">i>
el-button>
div>
<el-collapse-transition>
<div class="text item" v-show="showCondition">
<el-form :inline="true" :model="searchParam" class="demo-form-inline" label-width="120px"
label-position="right" label-suffix="：">
<el-form-item label="部门类型">
<el-select v-model="searchParam.type" placeholder="请选择" size="mini" style="width:120px"
@change="getDpList">
<el-option :key="1" label="维护部门" :value="1">el-option>
<el-option :key="2" label="运营部门" :value="2">el-option>
el-select>
el-form-item>
<el-form-item label="部门">
<el-cascader change-on-select size="mini" v-model="searchParam.topList"
:options="departmentList" filterable :props="defaultProps" clearable @change="getMenList">
el-cascader>
el-form-item>
<el-form-item label="员工">
<el-select v-model="searchParam.menId" placeholder="请选择" filterable size="mini">
<el-option v-for="item in MenList" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.no }}span>
el-option>
el-select>
el-form-item>
<el-form-item label="选择时间">
<el-date-picker :picker-options="pickerOptions" align="left" size="mini"
v-if="searchParam.menId != null && searchParam.menId != 0" v-model="searchParam.time"
value-format="yyyy-MM" type="monthrange" range-separator="至" start-placeholder="开始月份"
end-placeholder="结束月份">
el-date-picker>
<el-date-picker v-else :picker-options="pickerOptions" size="mini" v-model="searchParam.time"
type="month" value-format="yyyy-MM" placeholder="选择月份">
el-date-picker>
el-form-item>
<el-form-item style="float:right">
<el-button v-if="!showAdd" icon="el-icon-search" size="mini"
@click="search()">查询el-button>
el-form-item>
el-form>
div>
el-collapse-transition>
el-card>
<el-row :gutter="5">
<el-col :span="24">
<el-card>
<div slot="header" class="clearfix">
<span style="font-size:16px">
<i class="el-icon-tickets">i> 详细信息
span>
<el-button v-if="!showAdd" type="primary" style="float:right;" icon="el-icon-circle-plus-outline"
size="mini" @click="add()">新增人员考评el-button>
<el-button v-if="showAdd" type="primary" style="float:right;" size="mini"
@click="cancelAdd()">结束添加el-button>
<el-button v-if="showAdd" type="primary" style="float:right;margin-right:20px"
icon="el-icon-circle-plus-outline" size="mini" @click="addEvaluation()">添加el-button>
div>
<div>
<el-table height="750px" id="tb" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }" :data="dataList" style="width: 100%;">
<el-table-column width="140" label="姓名">
<template slot-scope="scope">
<el-select class="input_div" v-if="scope.row.isAdd" v-model="scope.row.menId"
placeholder="请选择" filterable size="mini">
<el-option v-for="item in MenList" :key="item.id" :label="item.name"
:value="item.id">
<span style="float: left">{{ item.name }}span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.no }}span>
el-option>
el-select>
<span v-else v-text="scope.row.menName">span>
template>
el-table-column>
<el-table-column width="160" label="月份">
<template slot-scope="scope">
<el-date-picker :picker-options="pickerOptions" class="month_div" size="mini"
v-if="scope.row.isAdd" v-model="scope.row.date" type="month" value-format="yyyy-MM"
placeholder="选择月">
el-date-picker>
<span v-else v-text="scope.row.date">span>
template>
el-table-column>
<el-table-column label="人工评分">
<el-table-column width="70" label="">
<template slot="header">
<div>
<el-tooltip content="着装:工作服、鞋" placement="top">
<span>*着装span>
el-tooltip>
div>
template>
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.clothing"
size="mini">el-input-number>
<span v-else v-text="scope.row.clothing">span>
template>
el-table-column>
<el-table-column label="出勤">
<el-table-column width="60" label="病假">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="2" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.sickLeave"
size="mini">el-input-number>
<span v-else v-text="scope.row.sickLeave">span>
template>
el-table-column>
<el-table-column width="60" label="事假">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.compassionateLeave"
size="mini">el-input-number>
<span v-else v-text="scope.row.compassionateLeave">span>
template>
el-table-column>
<el-table-column width="80" label="未按规定办理请假">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.inappropriateLeave"
size="mini">el-input-number>
<span v-else v-text="scope.row.inappropriateLeave">span>
template>
el-table-column>
el-table-column>
<el-table-column label="专业技能水平">
<el-table-column width="60" label="一级">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="4" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.skillLevelOne"
size="mini">el-input-number>
<span v-else v-text="scope.row.skillLevelOne">span>
template>
el-table-column>
<el-table-column width="60" label="二级">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="3" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.skillLevelTwo"
size="mini">el-input-number>
<span v-else v-text="scope.row.skillLevelTwo">span>
template>
el-table-column>
<el-table-column width="60" label="三级">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="2" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.skillLevelThree"
size="mini">el-input-number>
<span v-else v-text="scope.row.skillLevelThree">span>
template>
el-table-column>
el-table-column>
<el-table-column label="工作态度">
<el-table-column width="60" label="主管反馈">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.manageFeedBack"
size="mini">el-input-number>
<span v-else v-text="scope.row.manageFeedBack">span>
template>
el-table-column>
<el-table-column width="60" label="投诉情况">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.complaint"
size="mini">el-input-number>
<span v-else v-text="scope.row.complaint">span>
template>
el-table-column>
<el-table-column width="84">
<template slot="header">
<div>
<el-tooltip content="违纪情况:上班打游戏、睡觉、带无关人员进入办公区域" placement="top">
<span>*违纪情况span>
el-tooltip>
div>
template>
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="14" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.lowViolation"
size="mini">el-input-number>
<span v-else v-text="scope.row.lowViolation">span>
template>
el-table-column>
el-table-column>
<el-table-column width="77" label="">
<template slot="header">
<div>
<el-tooltip content="违反安全规定:吸烟等" placement="top">
<span>*违反安全规定span>
el-tooltip>
div>
template>
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="20" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.security"
size="mini">el-input-number>
<span v-else v-text="scope.row.security">span>
template>
el-table-column>
el-table-column>
<el-table-column label="系统评分">
<el-table-column label="设备清洁保养">
<el-table-column width="70" label="根据系统工单">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="20" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.maintenance"
size="mini">el-input-number>
<span v-else v-text="scope.row.maintenance">span>
template>
el-table-column>
el-table-column>
<el-table-column width="70" label="记录本填写">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.noteRecord"
size="mini">el-input-number>
<span v-else v-text="scope.row.noteRecord">span>
template>
el-table-column>
<el-table-column width="80" label="设备及配电间巡检情况">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.inspection"
size="mini">el-input-number>
<span v-else v-text="scope.row.inspection">span>
template>
el-table-column>
<el-table-column width="60" label="迟到">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.late" size="mini">el-input-number>
<span v-else v-text="scope.row.late">span>
template>
el-table-column>
<el-table-column width="60" label="早退">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.earlyLeave"
size="mini">el-input-number>
<span v-else v-text="scope.row.earlyLeave">span>
template>
el-table-column>
<el-table-column width="60" label="旷工">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="15" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.absenteeism"
size="mini">el-input-number>
<span v-else v-text="scope.row.absenteeism">span>
template>
el-table-column>
<el-table-column width="60" label="响应时间">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.responseTime"
size="mini">el-input-number>
<span v-else v-text="scope.row.responseTime">span>
template>
el-table-column>
<el-table-column width="70" label="维修量">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.repairCount"
size="mini">el-input-number>
<span v-else v-text="scope.row.repairCount">span>
template>
el-table-column>
<el-table-column width="60" label="维修时间">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.repairTime"
size="mini">el-input-number>
<span v-else v-text="scope.row.repairTime">span>
template>
el-table-column>
<el-table-column width="84" label="">
<template slot="header">
<div>
<el-tooltip content="维修质量:维修完后重复故障率" placement="top">
<span>*维修质量span>
el-tooltip>
div>
template>
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.repairQuality"
size="mini">el-input-number>
<span v-else v-text="scope.row.repairQuality">span>
template>
el-table-column>
<el-table-column width="84" label="">
<template slot="header">
<div>
<el-tooltip content="工单填写情况:误填、漏填、填错" placement="top">
<span>*工单填写情况span>
el-tooltip>
div>
template>
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.planFilling"
size="mini">el-input-number>
<span v-else v-text="scope.row.planFilling">span>
template>
el-table-column>
<el-table-column width="70" label="接转单加权分">
<template slot-scope="scope">
<el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
v-if="scope.row.isEdit" v-model="scope.row.transferPlan"
size="mini">el-input-number>
<span v-else v-text="scope.row.transferPlan">span>
template>
el-table-column>
el-table-column>
<el-table-column width="90" label="得分">
<template slot-scope="scope">
<span>
{{
Number(scope.row.clothing) +
Number(scope.row.sickLeave) +
Number(scope.row.compassionateLeave) +
Number(scope.row.inappropriateLeave) +
Number(scope.row.skillLevelOne) +
Number(scope.row.skillLevelTwo) +
Number(scope.row.skillLevelThree) +
Number(scope.row.manageFeedBack) +
Number(scope.row.complaint) +
Number(scope.row.lowViolation) +
Number(scope.row.security) +
Number(scope.row.maintenance) +
Number(scope.row.noteRecord) +
Number(scope.row.inspection) +
Number(scope.row.late) +
Number(scope.row.earlyLeave) +
Number(scope.row.absenteeism) +
Number(scope.row.responseTime) +
Number(scope.row.repairCount) +
Number(scope.row.repairTime) +
Number(scope.row.repairQuality) +
Number(scope.row.planFilling) +
Number(scope.row.transferPlan) +
Number(scope.row.repairTime)
}}
span>
template>
el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="!scope.row.isEdit" type="text" size="mini"
@click="handleEdit(scope.$index, scope.row)">
编辑
el-button>
<el-button v-if="scope.row.isEdit" type="text" @click="doEdit(scope.$index, scope.row)"
size="mini">确定el-button>
<el-button v-if="scope.row.isEdit" type="text"
@click="cancelEdit(scope.$index, scope.row)" size="mini">取消el-button>
<el-button v-if="!scope.row.isEdit" type="text" size="mini"
@click="handleDelete(scope.$index, scope.row)">
删除
el-button>
template>
el-table-column>
el-table>
<el-pagination :current-page.sync="searchParam.page" @size-change="handleSizeChange"
@current-change="handleCurrentChange" :page-count="pageCount" :total="total"
:page-sizes="[50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">el-pagination>
div>
el-card>
el-col>
el-row>
div>
template>
<script>
import { parseTime, removeNull } from '@/utils'
import common from '@/api/common.js'
import personnelEvaluation from '@/api/performanceAssessment/personnelEvaluation.js'
import * as echarts from 'echarts'
import MyTable from '../../dashBoard/operationBoard/components/myTable.vue'
export default {
name: 'personnelEvaluation',
data () {
return {
col: [],
tableData: [],
showCondition: true, // 手风琴
searchParam: {
// lineCode: '华虹计通',
// stationCode: '8号线维保组',
// macSysNo: '所有',
topList: [],
type: 1,
menId: 0,
departmentId: 0,
startTime: '',
endTime: '',
time: [],
page: 1,
row: 50,
},
MenList: [{ id: 0, name: '全部' }],
defaultProps: {
children: 'children',
label: 'name',
id: 'id',
value: 'id'
},
departmentList: [],
departmentList1: [],
departmentList2: [],
companyList: [],
groupList: [],
menList: [],
dataList: [],
pageCount: 0, // 页数
total: 0, // 条目数
showAdd: false,
pickerOptions: this.getTime(),
}
},
created () {
var dayjs = this.dayjs
this.searchParam.time = dayjs(new Date()).add(-1, 'month').format('YYYY-MM')
this.getDeptList()
},
components: {
MyTable
},
mounted () {
},
methods: {
getDeptList () {
// 异步加载默认部门
var that = this
function p (arr) {
arr.reduce((promise, item) => {
return promise.then(res => {
return item()
})
}, Promise.resolve())
}
function p1 () {
return new Promise(res => {
setTimeout(() => {
// 获取维护部门
common.GetDepartmentListEnable({ type: 1 }).then((val) => {
if (val.data != null) {
that.departmentList1 = removeNull(val.data)
}
})
// 获取运营部门
common.GetOperateDepartmentListEnable({ type: 1 }).then((val) => {
if (val.data != null) {
that.departmentList2 = removeNull(val.data)
}
})
res()
}, 100)
})
}
function p2 () {
return new Promise(res => {
setTimeout(() => {
that.getDpList(1)
res()
}, 100)
})
}
function p3 () {
return new Promise(res => {
setTimeout(() => {
if (that.departmentList.length > 0) {
that.searchParam.type = 1
}
that.getMenList()
that.searchData()
res()
}, 100)
})
}
p([p1, p2, p3])
},
changeMen (val) {
if (val) {
var dayjs = this.dayjs
var arr = []
arr.push(dayjs(new Date()).format('YYYY-MM'))
arr.push(dayjs(new Date()).format('YYYY-MM'))
this.searchParam.time = arr
}
},
search(){
this.searchParam.page =1
this.searchData()
},
searchData () {
if (!this.searchParam.time) {
this.$message({
type: 'warning',
message: '请选择时间！',
})
return
}
if (this.searchParam.menId != null && this.searchParam.menId != 0) {
this.searchParam.startTime = this.searchParam.time[0] + '-01'
this.searchParam.endTime = this.searchParam.time[1] + '-01'
} else {
this.searchParam.startTime = this.searchParam.time + '-01'
this.searchParam.endTime = this.searchParam.time + '-01'
}
this.searchParam.departmentId = this.searchParam.topList[this.searchParam.topList.length - 1]
var obj = {
menId: this.searchParam.menId,
departmentId: this.searchParam.departmentId,
startTime: this.searchParam.startTime,
endTime: this.searchParam.endTime,
page: this.searchParam.page,
row: this.searchParam.row
}
personnelEvaluation.getAssessment(obj).then((val) => {
if (val.status == 0) {
this.tableData = val.data.listData
this.tableData.forEach(item => {
item.isAdd = false
item.isEdit = false
});
this.dataList = this.tableData
this.total = val.data.data
this.pageCount = val.data.pageNum
}
})
},
getTime () {
return {
disabledDate (time) {
const date = new Date();
const year = date.getFullYear();
let month = date.getMonth() + 1;
if (month >= 1 && month <= 9) {
month = "0" + month;
}
const currentdate = year.toString() + month.toString();
const timeyear = time.getFullYear();
let timemonth = time.getMonth() + 1;
if (timemonth >= 1 && timemonth <= 9) {
timemonth = "0" + timemonth;
}
const timedate = timeyear.toString() + timemonth.toString();
return currentdate <= timedate;
},
};
},
handleEdit (index, row) {
row.isEdit = true
this.$forceUpdate()
},
// 编辑
doEdit (index, row) {
if (row.isAdd) {
// 新增
if (!row.menId) {
this.$message({
type: 'warning',
message: '请选择人员！',
})
return
}
if (!row.date) {
this.$message({
type: 'warning',
message: '请选择月份！',
})
return
}
var date = row.date + '-01'
var men = this.MenList.find(item => item.id == row.menId)
var menName = men.name
var obj = {
menId: row.menId,
menName: menName,
clothing: row.clothing,
sickLeave: row.sickLeave,
compassionateLeave: row.compassionateLeave,
inappropriateLeave: row.inappropriateLeave,
skillLevelOne: row.skillLevelOne,
skillLevelTwo: row.skillLevelTwo,
skillLevelThree: row.skillLevelThree,
manageFeedBack: row.manageFeedBack,
complaint: row.complaint,
lowViolation: row.lowViolation,
security: row.security,
maintenance: row.maintenance,
noteRecord: row.noteRecord,
inspection: row.inspection,
late: row.late,
earlyLeave: row.earlyLeave,
absenteeism: row.absenteeism,
responseTime: row.responseTime,
repairCount: row.repairCount,
repairTime: row.repairTime,
repairQuality: row.repairQuality,
planFilling: row.planFilling,
transferPlan: row.transferPlan,
date: date
}
personnelEvaluation.addAssessment(obj).then((val) => {
if (val.status == 0) {
row.isAdd = false
row.isEdit = false
var men = this.MenList.find(item => item.id == row.menId)
row.menName = men.name
this.$message({
type: 'success',
message: '添加成功！',
})
} else {
this.$message({
type: 'error',
message: '添加失败！',
})
}
})
} else {
if (row.date != null && row.date != undefined && row.date.includes('-')) {
row.date = row.date.substring(0, 4) + row.date.substring(5, 7)
}
// 修改
personnelEvaluation.editAssessment(row).then((val) => {
if (val != null && val.status == 0) {
if (!this.showAdd) {
this.searchData()
} else {
row.isEdit = false
this.$forceUpdate()
}
this.$message({
type: 'success',
message: '编辑成功！',
})
} else {
this.$message({
type: 'error',
message: '编辑失败！',
})
}
})
}
},
// 取消编辑
cancelEdit (index, row) {
row.isEdit = false
if (row.isAdd) {
this.dataList.splice(index, 1)
}
this.$forceUpdate()
},
// 删除
handleDelete (index, row) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
})
.then(() => {
var obj = {
date: row.date,
menId: row.menId
}
personnelEvaluation.deleteAssessment(obj).then((val) => {
if (val.status == 0) {
this.searchData()
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handleCurrentChange (val) {
this.searchParam.page = val
// 查询数据
this.searchData()
},
// 调整每页显示条数
handleSizeChange (val) {
this.searchParam.row = val
// 查询数据
this.searchData()
},
// 点击添加按钮
add () {
this.showAdd = true
this.dataList = []
},
// 点击完成添加按钮
cancelAdd () {
this.showAdd = false
this.searchData()
},
addEvaluation () {
if (this.searchParam.topList.length == 0) {
this.$message({
type: 'warning',
message: '请选择部门！',
})
return
}
let row = {
menName: '',
clothing: 5,
sickLeave: 2,
compassionateLeave: 5,
inappropriateLeave: 10,
skillLevelOne: 4,
skillLevelTwo: 3,
skillLevelThree: 2,
manageFeedBack: 10,
complaint: 10,
lowViolation: 14,
security: 20,
maintenance: 20,
noteRecord: 5,
inspection: 5,
late: 5,
earlyLeave: 5,
absenteeism: 15,
responseTime: 10,
repairCount: 10,
repairTime: 10,
repairQuality: 10,
planFilling: 10,
transferPlan: 10,
total: 210,
date: '',
isEdit: true,
isAdd: true
}
this.dataList.unshift(row);
},
// 根据部门类型获取部门列表
getDpList (type) {
new Promise((resolve) => {
this.searchParam.menId = 0
this.MenList = [{ id: 0, name: '全部' }]
if (type == 1) {
this.departmentList = this.departmentList1
}
if (type == 2) {
this.departmentList = this.departmentList2
}
if (!type) {
this.departmentList = []
}
resolve('成功')
}).then((resolve) => {
if (this.departmentList.length > 0) {
this.searchParam.topList.push(this.departmentList[0].id)
}
})
},
// 获取部门员工
getMenList (list) {
this.searchParam.menId = 0
this.searchParam.departmentId = 0
if (!this.searchParam.type || this.searchParam.topList.length == 0) {
this.MenList = [{ id: 0, name: '全部' }]
} else {
var model = {}
if (this.searchParam.type == 1) {
model = {
iPage: 1,
count: 9999,
noName: '',
departmentId: -1,
departmentIdList: [],
specialty: ''
}
model.departmentId =
this.searchParam.topList[this.searchParam.topList.length - 1]
common.GetMenInfor(model).then((val) => {
if (val.data != null) {
this.MenList = val.data.listData
} else {
this.MenList = []
}
this.MenList.push({ id: 0, name: '全部' })
})
}
if (this.searchParam.type == 2) {
model = {
iPage: 1,
count: 9999,
noName: '',
departmentId: -1,
departmentIdList: [],
specialty: ''
}
model.departmentId =
this.searchParam.topList[this.searchParam.topList.length - 1]
common.GetOperateMenInfor(model).then((val) => {
if (val.data != null) {
this.MenList = val.data.listData
} else {
this.MenList = []
}
this.MenList.push({ id: 0, name: '全部' })
})
}
}
},
}
}
script>
<style lang="scss">
.el-card__body {
padding: 0px;
}
.input_div input.el-input__inner {
width: 140px;
}
.month_div input.el-input__inner {
width: 63% !important;
}
#tb {
.num_div_one {
width: 54px;
}
.el-input-number.is-without-controls .el-input__inner {
padding-left: 8px;
padding-right: 8px;
}
}
style>