vue3页面编写-导入导出excel、展开查询项等
数据保持
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.name" v-if="route.meta.keepAlive" />
</keep-alive>
<component :is="Component" :key="route.name" v-if="!route.meta.keepAlive"/>
</router-view>
{ //
path: "/main/rvCarBom",
meta: {
keepAlive: true,
isBack: false
},
component: () => import('@/pages/rv/bom/rvCarBom.vue'),
},
功能页面
<!--
-->
<template>
<div class="rv_root_container">
<div class="rv_container">
<div>
<el-form :inline="true" label-position="right" size="small">
<el-row>
<el-form-item label="装车基地">
<el-select v-model="dddd.form.city" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory">
<el-option
v-for="item in dddd.cityList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车系">
<el-select v-model="dddd.form.carModel" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory">
<el-option
v-for="item in dddd.carModelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车型">
<el-select v-model="dddd.form.carType" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory">
<el-option
v-for="item in dddd.carTypeList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="配置">
<el-select v-model="dddd.form.carConf" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory">
<el-option
v-for="item in dddd.carConfList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="选装">
<el-select v-model="dddd.form.carSel" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory">
<el-option
v-for="item in dddd.carSelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="国家">
<el-select v-model="dddd.form.country" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory">
<el-option
v-for="item in dddd.countryList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-row>
<el-row v-if="dddd.isShow">
<el-form-item label="总成料号">
<el-input type="textarea" :rows="1" :clearable="true" v-model="dddd.form.assemblyMatNumber" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="总成描述">
<el-input type="textarea" :rows="1" :clearable="true" v-model="dddd.form.assemblyDes" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="工厂">
<el-select v-model="dddd.form.factory" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory">
<el-option
v-for="item in dddd.factoryList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="线体名称">
<el-select v-model="dddd.form.lineName" clearable placeholder="请选择" style="width:150px">
<el-option
v-for="item in dddd.lineNameList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="代装厂">
<el-input type="textarea" :rows="1" :clearable="true" v-model="dddd.form.buyLocation" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="产能检查">
<el-select v-model="dddd.form.capacityCheck" clearable placeholder="请选择" style="width:150px">
<el-option
v-for="item in dddd.capacityCheckList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="产品大类">
<el-select v-model="dddd.form.product" clearable placeholder="请选择" style="width:150px" @change="handleChangeProduct">
<el-option
v-for="item in dddd.productList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="产品小类">
<el-select v-model="dddd.form.productSub" clearable placeholder="请选择" style="width:150px">
<el-option
v-for="item in dddd.productSubList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="计划员">
<el-select v-model="dddd.form.planPerson" clearable placeholder="请选择" style="width:150px">
<el-option
v-for="item in dddd.planPersonList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-button type="primary" @click="clickSearch" :icon="IconReload">查询</el-button>
<el-button @click="clickReset" :icon="IconRefresh">重置</el-button>
<el-button type="primary" @click="clickExport" :icon="IconDownload">导出</el-button>
<el-button type="primary" @click="clickEdit" :icon="IconPlus">新增</el-button>
<el-button type="primary" @click="clickDelete" :icon="IconRowRemove">删除</el-button>
<el-upload class="rv_upload" action="" :show-file-list="false" :on-change="handleOnChange">
<el-button type="primary" :icon="IconUpload">导入</el-button>
</el-upload>
<el-button text @click="clickTemplate">模板下载</el-button>
<el-button type="primary" @click="clickShow" :icon="dddd.isShow ? IconArrowUp : IconArrowDown">
{{ dddd.isShow ? "收起" : "展开" }}
</el-button>
<a id="aExport" href="#" class="hide"></a>
</el-row>
</el-form>
</div>
<div class="rv_table">
<el-table stripe border show-overflow-tooltip highlight-current-row size="small"
class-name="custom-table" header-cell-class-name="custom-header-cell-class-name" :row-class-name="tableRowClassName"
:data="dddd.tableList" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="50" fixed="left"></el-table-column>
<el-table-column align="center" width="100" label="操作" fixed="left">
<template #default="scope">
<el-button type="primary" size="small" @click="clickEdit1(scope.row)" :icon="IconEdit"></el-button>
<el-button type="danger" size="small" @click="clickDelete1(scope.row)" :icon="IconRowRemove"></el-button>
</template>
</el-table-column>
<el-table-column align="center" type="index" label="序号" width="50" fixed="left"></el-table-column>
<el-table-column align="center" prop="city" label="装车基地" width="75" fixed="left"></el-table-column>
<el-table-column align="center" prop="carModel" label="车系" width="75" fixed="left"></el-table-column>
<el-table-column align="center" prop="carType" label="车型" width="75" fixed="left"></el-table-column>
<el-table-column align="center" prop="carConf" label="配置" width="75" fixed="left"></el-table-column>
<el-table-column align="center" prop="carSel" label="选装" width="75" fixed="left"></el-table-column>
<el-table-column align="center" prop="country" label="国家" width="75" fixed="left"></el-table-column>
<el-table-column align="center" prop="assemblyMatNumber" label="总成料号" width="150" fixed="left"></el-table-column>
<el-table-column align="center" prop="assemblyDes" label="总成描述" width="220" fixed="left"></el-table-column>
<el-table-column align="center" prop="num" label="用量" width="75"></el-table-column>
<el-table-column align="center" prop="factory" label="工厂" width="75"></el-table-column>
<el-table-column align="center" prop="carScale" label="份额" width="75"></el-table-column>
<el-table-column align="center" prop="speLineName" label="线体名称" width="150"></el-table-column>
<el-table-column align="center" prop="buyLocation" label="代装厂" width="75"></el-table-column>
<el-table-column align="center" prop="capacityCheck" label="产能检查" width="75"></el-table-column>
<el-table-column align="center" prop="product" label="产品大类" width="75"></el-table-column>
<el-table-column align="center" prop="productSub" label="产品小类" width="75"></el-table-column>
<el-table-column align="center" prop="planPerson" label="计划员" width="75"></el-table-column>
<el-table-column align="center" prop="carScale1" label="1月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale2" label="2月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale3" label="3月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale4" label="4月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale5" label="5月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale6" label="6月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale7" label="7月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale8" label="8月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale9" label="9月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale10" label="10月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale11" label="11月份额" width="75"></el-table-column>
<el-table-column align="center" prop="carScale12" label="12月份额" width="75"></el-table-column>
<el-table-column align="center" prop="lineName" label="特殊线体" width="150"></el-table-column>
<el-table-column align="center" prop="createName" label="创建人" width="75"></el-table-column>
<el-table-column align="center" prop="createTime" label="创建时间" width="150"></el-table-column>
<el-table-column align="center" prop="updateName" label="修改人" width="75"></el-table-column>
<el-table-column align="center" prop="updateTime" label="修改时间" width="150"></el-table-column>
</el-table>
</div>
<div class="rv_center">
<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="dddd.pageNum"
:page-size="dddd.pageSize"
:page-sizes="[10, 100, 500, 1000, 2000]"
:total="dddd.total"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
</div>
</template>
<style>
.rv_root_container {
flex: 1;
display: flex;
background-color: #f3f3f3;
padding: 16px;
overflow: hidden;
}
.rv_container {
flex: 1;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 5px;
padding: 16px;
overflow: hidden;
position: relative;
}
.rv_center {
display: flex;
align-content: center;
justify-content: center;
}
.rv_table {
flex: 1;
margin-top: 16px;
margin-bottom: 16px;
position: relative;
}
.rv_upload {
line-height: 0.8;
margin-left: 16px;
}
.custom-table .cell {
padding: 0;
justify-content: center;
}
.el-table .warning-row {
color: tomato;
}
</style>
<script setup>
import { IconReload, IconRefresh, IconDownload, IconPlus, IconRowRemove, IconUpload, IconArrowUp, IconArrowDown,IconEdit } from "@tabler/icons-vue"
import { basePostReq, sendPostReq } from "@/service/baseReq.js"
import { ApiPaths } from "@/service/Request.js"
import { ElMessage, ElMessageBox } from "element-plus"
import { useRoute, useRouter } from "vue-router"
import { reactive, onActivated } from "vue"
const dddd = reactive({
form: {},
tableList: [],
pageSize: 10,
pageNum: 1,
total: 0,
selectBatch: [],
isShow: false,
factoryList: ['SZ55','X157','C157','HFF5'],
lineNameList: [],
capacityCheckList: ['是', '否'],
productList: [],
productSubList: [],
planPersonList: [],
cityList: [],
carModelList: [],
carTypeList: [],
carConfList: [],
carSelList: [],
countryList: []
})
const route = useRoute()
const router = useRouter()
onActivated(() => {
if (!route.meta.isBack) {
clickReset()
dddd.tableList = []
}
route.meta.isBack = false
})
function handleSizeChange(val) {
dddd.pageSize = val
getPage()
}
function handleCurrentChange(val) {
dddd.pageNum = val
getPage()
}
function handleSelectionChange(val) {
dddd.selectBatch = val
}
function tableRowClassName(item) {
if (item.row.capacityCheck != '是') {
return 'warning-row'
}
return ''
}
function getParam() {
var param = {}
if (dddd.form.city) {
param.city = dddd.form.city.replace(/[\r\n]/g, ";")
}
if (dddd.form.carModel) {
param.carModel = dddd.form.carModel.replace(/[\r\n]/g, ";")
}
if (dddd.form.carType) {
param.carType = dddd.form.carType.replace(/[\r\n]/g, ";")
}
if (dddd.form.carConf) {
param.carConf = dddd.form.carConf.replace(/[\r\n]/g, ";")
}
if (dddd.form.carSel) {
param.carSel = dddd.form.carSel.replace(/[\r\n]/g, ";")
}
if (dddd.form.country) {
param.country = dddd.form.country.replace(/[\r\n]/g, ";")
}
if (dddd.form.assemblyMatNumber) {
param.assemblyMatNumber = dddd.form.assemblyMatNumber.replace(/[\r\n]/g, ";")
}
if (dddd.form.assemblyDes) {
param.assemblyDes = dddd.form.assemblyDes.replace(/[\r\n]/g, ";")
}
if (dddd.form.factory) {
param.factory = dddd.form.factory
}
if (dddd.form.buyLocation) {
param.buyLocation = dddd.form.buyLocation.replace(/[\r\n]/g, ";")
}
if (dddd.form.lineName) {
param.lineName = dddd.form.lineName
}
if (dddd.form.capacityCheck) {
param.capacityCheck = dddd.form.capacityCheck
}
if (dddd.form.product) {
param.product = dddd.form.product
}
if (dddd.form.productSub) {
param.productSub = dddd.form.productSub
}
if (dddd.form.planPerson) {
param.planPerson = dddd.form.planPerson
}
return param
}
function clickSearch() {
getPage()
}
function getPage() {
var param = getParam()
param.pageNum = dddd.pageNum
param.pageSize = dddd.pageSize
basePostReq(ApiPaths.rvNeedCarBomGetPage, param, (res) => {
if (res) {
dddd.tableList = res.data
dddd.total = res.total
}
})
}
function clickReset() {
dddd.form = {}
dddd.pageNum = 1
getInitMap()
getCarTypeInitMap()
}
function clickExport() {
var param = getParam()
var config = {
responseType: "blob",
}
const data = sendPostReq(ApiPaths.rvNeedCarBomExport, param, config, true, true, true, (res) => {
if (res) {
const blob = new Blob([res])
let $a = document.getElementById("aExport")
$a.download = "整车bom.xlsx"
$a.href = URL.createObjectURL(blob)
$a.click()
URL.revokeObjectURL($a.href)
}
}
)
}
function clickTemplate() {
var config = {
responseType: "blob",
}
sendPostReq(ApiPaths.rvNeedCarBomExportTemplate,null,config,true,true,true,(res) => {
if (res) {
const blob = new Blob([res])
let $a = document.getElementById("aExport")
$a.download = "整车bom模板.xlsx"
$a.href = URL.createObjectURL(blob)
$a.click()
URL.revokeObjectURL($a.href)
}
}
)
}
function handleOnChange(file) {
if (file.status == "ready") {
var curFile = file.raw
const isExcel = [
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
].includes(curFile.type)
const isLt1M = curFile.size / 1024 / 1024 < 100
if (!isExcel) {
ElMessage.error("文件格式为.xlsx")
return
}
if (!isLt1M) {
ElMessage.error("文件要小于100M")
return
}
var formData = new FormData()
formData.append("file", file.raw)
formData.append("param", JSON.stringify(getParam()))
var config = {
headers: {
"Content-Type": "multipart/form-data",
},
}
sendPostReq(ApiPaths.rvNeedCarBomImportFileCheck1,formData,config,true,true,false,(res) => {
if (res && res.code == 200) {
ElMessage.success("上传成功")
}
}
)
}
}
function clickDelete() {
if (!dddd.selectBatch.length) {
ElMessage.error("没有数据被选中")
return
}
ElMessageBox.confirm("是否删除", "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
var ids = dddd.selectBatch.map((p) => p.id)
var param = {}
param.ids = ids
sendPostReq(ApiPaths.rvNeedCarBomRemoveListByIds,param,null,true,true,false,(res) => {
if (res && res.code == 200) {
ElMessage.success("删除成功")
clickSearch()
}
}
)
})
}
function clickDelete1(item) {
if (!item || !item.id) {
ElMessage.error("没有id")
return
}
ElMessageBox.confirm("是否删除", "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
var param = {}
param.ids = [item.id]
sendPostReq(ApiPaths.rvNeedCarBomRemoveListByIds,param,null,true,true,false,(res) => {
if (res && res.code == 200) {
ElMessage.success("删除成功")
clickSearch()
}
}
)
})
}
function clickEdit() {
router.push({ path: "/main/rvCarBomEdit" })
}
function clickEdit1(item) {
if (item && item.id) {
item.edit = "update"
router.push({ path: "/main/rvCarBomEdit",query:item })
}
}
function clickShow() {
dddd.isShow = !dddd.isShow
}
function getLineName() {
var param = {}
param.factory = dddd.form.factory
basePostReq(ApiPaths.rvBomCarProductMatGetListLineName, param, (res) => {
dddd.lineNameList = res
})
}
function handleChangeFactory() {
getLineName()
}
function getInitMap() {
var param = {}
basePostReq(ApiPaths.rvNeedCarBomGetInitMap, param, (res) => {
if (res) {
dddd.productList = res.productList
dddd.productSubList = res.productSubList
dddd.planPersonList = res.planPersonList
dddd.lineNameList = res.lineNameList
dddd.factoryList = res.factoryList
}
})
}
function getProductSub() {
var param = {}
if (dddd.form.product) {
param.product = dddd.form.product
}
basePostReq(ApiPaths.rvBomCarProductMatGetListProductSub, param, (res) => {
dddd.productSubList = res
})
}
function handleChangeProduct() {
getProductSub()
}
function getCarTypeInitMap() {
var param = {}
basePostReq(ApiPaths.rvNeedCarTypeManagerGetCarTypeInitMap, param, (res) => {
if (res) {
dddd.cityList = res.cityList
dddd.carModelList = res.carModelList
dddd.carTypeList = res.carTypeList
dddd.carSelList = res.carSelList
dddd.carConfList = res.carConfList
dddd.countryList = res.countryList
}
})
}
</script>
编辑页面
<!--
-->
<template>
<div class="rv_root_container_edit">
<div class="rv_container_edit">
<div>
<el-form label-position="right" size="small">
<el-form-item label="装车基地" required>
<el-input :clearable="true" v-model="dddd.form.city" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="车系" required>
<el-input :clearable="true" v-model="dddd.form.carModel" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="车型" required>
<el-input :clearable="true" v-model="dddd.form.carType" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="配置" required>
<el-input :clearable="true" v-model="dddd.form.carConf" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="选装" required>
<el-input :clearable="true" v-model="dddd.form.carSel" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="国家" required>
<el-input :clearable="true" v-model="dddd.form.country" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="总成料号" required>
<el-input :clearable="true" v-model="dddd.form.assemblyMatNumber" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="总成描述" required>
<el-input :clearable="true" v-model="dddd.form.assemblyDes" style="width:220px"></el-input>
</el-form-item>
<el-form-item label="用量" required>
<el-input :clearable="true" v-model="dddd.form.num" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="工厂" required>
<el-input :clearable="true" v-model="dddd.form.factory" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="份额" required>
<el-input :clearable="true" v-model="dddd.form.carScale" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="线体名称">
<el-input :clearable="true" v-model="dddd.form.speLineName" style="width:150px" disabled></el-input>
</el-form-item>
<el-form-item label="代装厂">
<el-input :clearable="true" v-model="dddd.form.buyLocation" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="产能检查">
<el-input :clearable="true" v-model="dddd.form.capacityCheck" style="width:150px" disabled></el-input>
</el-form-item>
<el-form-item label="产品大类">
<el-input :clearable="true" v-model="dddd.form.product" style="width:150px" disabled></el-input>
</el-form-item>
<el-form-item label="产品小类">
<el-input :clearable="true" v-model="dddd.form.productSub" style="width:150px" disabled></el-input>
</el-form-item>
<el-form-item label="计划员">
<el-input :clearable="true" v-model="dddd.form.planPerson" style="width:150px" disabled></el-input>
</el-form-item>
<el-form-item label="1月份额">
<el-input :clearable="true" v-model="dddd.form.carScale1" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="2月份额">
<el-input :clearable="true" v-model="dddd.form.carScale2" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="3月份额">
<el-input :clearable="true" v-model="dddd.form.carScale3" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="4月份额">
<el-input :clearable="true" v-model="dddd.form.carScale4" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="5月份额">
<el-input :clearable="true" v-model="dddd.form.carScale5" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="6月份额">
<el-input :clearable="true" v-model="dddd.form.carScale6" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="7月份额">
<el-input :clearable="true" v-model="dddd.form.carScale7" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="8月份额">
<el-input :clearable="true" v-model="dddd.form.carScale8" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="9月份额">
<el-input :clearable="true" v-model="dddd.form.carScale9" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="10月份额">
<el-input :clearable="true" v-model="dddd.form.carScale10" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="11月份额">
<el-input :clearable="true" v-model="dddd.form.carScale11" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="12月份额">
<el-input :clearable="true" v-model="dddd.form.carScale12" style="width:150px"></el-input>
</el-form-item>
<el-form-item label="特殊线体">
<el-input :clearable="true" v-model="dddd.form.lineName" style="width:150px"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="clickBack" :icon="IconBackpackOff">返回</el-button>
<el-button type="primary" @click="clickConfirm" :icon="IconDoorEnter">确定</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<style>
.rv_root_container_edit {
display: flex;
flex: 1;
background-color: #f3f3f3;
padding: 16px;
overflow: hidden;
}
.rv_container_edit {
flex: 1;
background-color: white;
border-radius: 5px;
padding: 16px;
overflow: auto;
}
</style>
<script setup>
import { IconBackpackOff, IconDoorEnter } from "@tabler/icons-vue";
import { sendPostReq } from "@/service/baseReq.js";
import { ApiPaths } from "@/service/Request.js";
import { ElMessage } from "element-plus";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router"
import { reactive, onActivated } from "vue"
const dddd = reactive({
form: {
id: null
}
})
const route = useRoute()
const router = useRouter()
onBeforeRouteLeave((to, from, next) => {
to.meta.isBack = true
next()
})
onActivated(() => {
if (route.query && route.query.id) {
dddd.form = route.query
} else {
dddd.form = {}
}
})
if (route.query && route.query.id) {
dddd.form = route.query
}
function clickConfirm() {
if (dddd.form.edit == "update") {
sendPostReq(ApiPaths.rvNeedCarBomUpdateOneById, dddd.form, null, true, true, false, (res) => {
if (res && res.code == 200) {
ElMessage.success("更新成功")
clickBack()
}
}
)
} else {
sendPostReq(ApiPaths.rvNeedCarBomSave, dddd.form, null, true, true, false, (res) => {
if (res && res.code == 200) {
ElMessage.success("新增成功")
clickBack()
}
}
)
}
}
function clickBack() {
router.back()
}
</script>
改变cell颜色
//
.el-table .warning-row {
color: tomato;
}
.el-table .ws-normal .el-tooltip{
white-space: pre-line;
}
//
:cell-class-name="tableCellClassName"
//
function tableCellClassName(item) {
if (item.rowIndex % 5 == 3 && item.columnIndex == 15) {
return 'ws-normal'
} else if (item.rowIndex % 5 == 2) {
for(var i = 0; i < dddd.titleList.length; i ++) {
var curCell = dddd.titleList[i]
if (item.columnIndex == 15 + i && item.row[curCell] < 0) {
return 'warning-row'
}
}
}
return ''
}
原文地址：https://blog.csdn.net/liu1shi/article/details/140626164
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！