<el-collapse class="filter-div-row"> <el-collapse-item> <template slot="title"> <div class="header-center"> <span >更多条件</span> </div> </template> <template #content> <div> <my-search_list_much> :query_dict="query_dict" :label_title='"问题状态"' :field_name='"problem_state"' :button_list="dict.type.b002_08_problem_state"> </my-search_list_much> </div> </template> <div> <my-search_list_much> :query_dict="query_dict" :label_title='"问题状态"' :field_name='"problem_state"' :button_list="dict.type.b002_08_problem_state"> </my-search_list_much> </div> <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div> <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div> </el-collapse-item> </el-collapse> 子组件my-search_list_much中接收不到参数
时间: 2024-01-17 16:03:00 浏览: 134
可能是因为你在传递参数时,使用了单引号或双引号包裹参数名和参数值,而没有使用v-bind指令。正确的传递参数方式应该是:
```
<my-search_list_much
:query_dict="query_dict"
:label_title="'问题状态'"
:field_name="'problem_state'"
:button_list="dict.type.b002_08_problem_state"
></my-search_list_much>
```
注意,参数名和参数值需要使用v-bind指令绑定,而参数值中的字符串需要使用单引号或双引号包裹,并且外层的双引号不能省略。
相关问题
解释代码<template> <div class="paragraph-info"> <!-- 显示段落内容 --> <div class="header"> <el-button text type="danger" @click="state.clearAll">一键清空</el-button> <span>共计:</span> <b>{{ state.data.length }}</b> </div> <div class="box"> <template v-if="state.data.length > 0"> <div class="item" v-for="(i, k) in state.data" :key="k"> <div class="tp"> <div class="tt"> {{ i.title }} </div> <div class="act"> <el-button size="small" type="primary" text @click="state.open(i)" >编辑</el-button > <el-button size="small" type="danger" text @click="state.del(i)" >删除</el-button > </div> </div> <div class="cnt"> <div v-html="i.content"></div> </div> </div> </template> <template v-else> <div class="no-data">点击下方“新增段落”按钮新增。</div> </template> </div> <div class="plus-btn" @click="state.open()">新增段落</div> </div> <!-- 新增窗口 --> <el-dialog v-model="state.dialog" append-to-body :close-on-click-modal="false" destroy-on-close width="996px" top="5%" > <template #header> <slot>信息更新</slot> </template> <el-card> <el-form :model="state.form" ref="formRef" label-position="top" :rules="state.rules" > <el-form-item label="标题" prop="title"> <el-input placeholder="请输入标题" v-model.number="state.form.title" ></el-input> </el-form-item> <el-form-item label="内容" prop="content"> <self-editor v-model="state.form.content"></self-editor> </el-form-item> </el-form> </el-card> <template #footer> <el-button type="primary" @click="state.handler()"> 保存 </el-button> <el-button @click="state.dialog = false">关闭</el-button> </template> </el-dialog> </template>
这段代码是一个Vue组件的模板代码,包含了一个用于显示段落信息的页面和一个用于新增或编辑段落的弹出窗口。具体解释如下:
1. 页面部分:
- 使用了一个名为paragraph-info的div作为组件的根元素;
- 在header中添加了一个清空按钮和一个显示段落数量的元素;
- 在box中使用了v-if和v-for指令来循环渲染每个段落的标题和内容,当段落数量为0时,显示一个“点击下方‘新增段落’按钮新增”提示;
- 在plus-btn中添加了一个用于打开弹出窗口的按钮。
2. 弹出窗口部分:
- 使用了一个el-dialog组件作为弹出窗口,绑定了一个dialog变量用于控制其显示和隐藏;
- 在header slot中添加了一个“信息更新”的标题;
- 在el-form中添加了两个el-form-item元素,用于输入段落标题和内容;
- 在el-form-item中使用了prop属性来指定字段名,使用了v-model指令来绑定输入框的内容;
- 在最后的footer slot中添加了一个保存按钮和一个关闭按钮,点击保存按钮后会触发handler方法保存表单数据。
<template> <div class="sidebar"> <el-row class="menu_page"> <el-col> <el-menu mode="vertical" class="el-menu-vertical-demo" :collapse="collapse" :default-active="$route.path" background-color="#324057" text-color="#fff"> <div class="wrapper" ref="wrapper"> <Menu :items='items'/> </div> </el-menu> </el-col> </el-row> </div> </template>
这是一个 Vue.js 的组件代码,该组件定义了一个名为 "sidebar" 的侧边栏,它包含一个 el-menu 组件,其中的 items 数据由上层组件传递进来,根据传入的数据动态生成菜单项。其中,el-menu 组件的 mode 属性设置为 vertical,表示垂直布局,collapse 属性用于指定侧边栏是否折叠,default-active 属性用于设置默认选中项,background-color 和 text-color 属性用于设置菜单的背景色和文本颜色。此外还有一个名为 "wrapper" 的 div 元素,用于包裹 el-menu 组件。
阅读全文