Debug: calc() 未生效 = 内嵌样式表达式需使用空格分隔

MarkTime: 2024-06-25 17:10

LogTime: 2024-11-09 13:58:02

结论

calc()内的表达式 需要使用 空格分隔符,

即 更正 calc(100%-100px-10px); => calc(100% - 100px - 10px); 即可

源

<!-- 原错误代码 -->
<div class="layout-search" style="width: 100%;"><el-row type="flex"><el-col :span="8"><span class="mlft10" style="width: 100px;"><span class="layout-search-label">起始时间</span></span><!-- 更正为 style="width: calc(100% - 100px - 10px);"  --><el-date-picker style="width: calc(100%-100px-10px);" v-model="pageParam.condition.subSETimeRange" type="datetimerange"format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始时间"end-placeholder="结束时间"/></el-col><el-col :span="8"><span class="mlft10" style="width: 100px;"><span class="layout-search-label">内容</span></span><el-input style="width: calc(100%-100px-10px) !important;" v-model="pageParam.condition.warningContent" placeholder="请输入内容"clearable maxlength="32"></el-input></el-col><el-col :span="8"><span class="mlft10" style="width: 100px;"><span class="layout-search-label">标题</span></span><el-input style="width: calc(100%-100px-10px);" v-model="pageParam.condition.title" placeholder="请输入标题" clearable maxlength="32"></el-input></el-col></el-row>
<div>