VUE的solt使用

最新推荐文章于 2025-06-06 17:41:06 发布

原创最新推荐文章于 2025-06-06 17:41:06 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5

前端同时被 2 个专栏收录

50 篇文章

订阅专栏

es6

5 篇文章

订阅专栏

这篇博客探讨了在前端开发中如何使用`el-form-item`和`el-select`组件处理长江大桥的数据。内容涉及动态加载、过滤、远程方法及添加新选项的功能，同时展示了在数据不存在时的交互设计，包括提示用户添加新条目以及相应的确认操作。

<el-form-item
v-if="forms.fileType=== '长江大桥'"
label="长江大桥"
prop="bureauPoint"
:rules="{required:false, message:'请选择长江大桥',trigger: 'blur'}"
<el-select
v-model="forms.bureauPoint"
size="small"
v-if="homeTf"
:disabled="demands ||ldemandsNew"
filterable
:clearable="true"
placeholder="请选择"
remote
remote-method="remoteMethodsBureauPoints"
@focus="remoteMethodsBureauPoints()"
style="width:400px">
<el-option v-for="item in bureauPointList" :key="item.value":label="item.label":value="item.value"
></el-option><template
slot="empty">
<div
style="padding:10px 20px;">
<p>该长江大桥不存
在,是否添加?</p>
<el-button
type="text" style="float:
right;"
@click="cancleBureauPoint">否</el-button>
<el-button
type="text" style="float:
right;margin-right: 20px;"
@click="addBureauPointList"
>是</el-button>
</div></template><el-pagination
layout="prev, next,
total"
@prev-click="prev
PageClick ('bureauPoint')"
@next-click="next
PageClick('bureauPoint')"
:page-size="burea
uPointPage.pageSize"
:total="bureauPoint
Page.total"
small/>
</el-select>