<el-form-item label="设备类型ID/资产编号:" > <template v-for="(item, index) in logAssets" > <span v-if="item.logAssetId === form.logAssetId">{{ item.label }}</span> </template> </el-form-item> span换成input
时间: 2024-02-10 14:04:07 浏览: 30
你想把这个表单项中的 `<span>` 元素改成 `<input>` 元素,是吗?那么你可以把代码改成这样:
```html
<el-form-item label="设备类型ID/资产编号:">
<template v-for="(item, index) in logAssets">
<input v-if="item.logAssetId === form.logAssetId" :value="item.label">
</template>
</el-form-item>
```
这样,当 `item.logAssetId === form.logAssetId` 时,就会渲染一个 `<input>` 元素,并将 `item.label` 的值作为输入框的初始值。
相关问题
<el-form-item label="设备类型ID/资产编号:"> <el-select v-model="form.logAssetId"> <el-option v-for="item in logAssets" :key="item.logAssetId" :label="item.label" :value="item.logAssetId"></el-option> </el-select> </el-form-item>把el-select改为treeselect
如果您想把这段代码中的 `el-select` 改为 `treeselect`,您可以使用 Element-UI 提供的 `el-tree-select` 组件来实现。您需要首先在项目中安装 `vue-treeselect` 和 `element-ui` 两个依赖库,然后按照以下步骤进行修改:
1. 在 Vue 组件中引入 `el-tree-select` 组件和 `vue-treeselect` 库:
```
<template>
<el-form>
<el-form-item label="设备类型ID/资产编号:">
<el-tree-select v-model="form.logAssetId" :data="logAssets"></el-tree-select>
</el-form-item>
</el-form>
</template>
<script>
import ElTreeSelect from "element-ui/lib/el-tree-select";
import "element-ui/lib/theme-chalk/el-tree-select.css";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: {
ElTreeSelect,
Treeselect,
},
data() {
return {
form: {
logAssetId: "",
},
logAssets: [
{
id: 1,
label: "设备类型1",
children: [
{
id: 11,
label: "资产编号1",
},
{
id: 12,
label: "资产编号2",
},
],
},
{
id: 2,
label: "设备类型2",
children: [
{
id: 21,
label: "资产编号3",
},
{
id: 22,
label: "资产编号4",
},
],
},
],
};
},
};
</script>
```
2. 修改 `el-select` 为 `el-tree-select`,并设置 `:data` 属性为 `logAssets`。
这样就可以将 `el-select` 改为 `el-tree-select`,并实现类似的树形选择功能了。
<el-form-item label="设备类型ID/资产编号:">{{recursionGet(list,form.logAssetId)}} </el-form-item> 的正确写法
这段代码的正确写法应该是:
```html
<el-form-item label="设备类型ID/资产编号:">
<template v-if="list && list.length">
{{ recursionGet(list, form.logAssetId) }}
</template>
</el-form-item>
```
其中,`recursionGet` 是一个自定义的方法,它会递归遍历 `list` 数组,查找对应 `logAssetId` 值的对象,并返回该对象的某个属性值。如果 `list` 数组为空,则不会显示任何内容。使用 `v-if` 来判断 `list` 数组是否存在,以避免出现错误。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)