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>