工作294:for[item.key]使用

最新推荐文章于 2023-05-18 20:33:21 发布

前端小歌谣

最新推荐文章于 2023-05-18 20:33:21 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_43392489/article/details/111999798

这段代码展示了如何使用Element UI在前端实现复杂表单的构建，包括输入框、级联选择器、开关、标签输入及日期时间选择等组件。通过v-model进行数据双向绑定，实现了各组件间的交互和数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <el-form label-width="80px">
      <el-form-item label="项目名">
        <el-input v-model="project_name" placeholder="请输入项目名"></el-input>
      </el-form-item>
      <el-form-item v-for="item in AweMepro" :label="item.name">
        <el-input v-if="item.widget.type == 'input'" v-model="form[item.key]" placeholder="名称"></el-input>
        <!--          <el-select v-else-if="item.widget.type == 'category-select'" v-model="form[item.key]" placeholder="">-->
        <!--            <el-option v-for="row in item.widget.categories" :label="row.title" :value="row.value"></el-option>-->
        <!--          </el-select>-->

        <!--          <el-cascader-->
        <!--            v-else-if="item.widget.type == 'category-select'"-->
        <!--            v-model="form[item.key]"-->
        <!--            :options="item.widget.categories"-->
        <!--            @change="handleChange"-->
        <!--          >-->
        <!--          </el-cascader>-->

        <el-cascader v-else-if="item.widget.type == 'category-select'" v-model="categoryValue"
                     :options="item.widget.categories" @change="handleChange">
          <template slot-scope="{ node, data }">
            <span>{{ data.title }}</span>
          </template>
        </el-cascader>


        <el-switch v-else-if="item.widget.type == 'boolean-select'" v-model="form[item.key]" text="是否原创"></el-switch>
        <el-tag v-else-if="item.widget.type == 'tag-input'" v-for="row in form[item.key]" size="medium" closable>{{
            row
          }}
        </el-tag>
        <el-date-picker
            v-else-if="item.widget.type == 'date-time'"
            v-model="form[item.key]"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
        >
        </el-date-picker>
        <el-upload :action="action"
            v-else-if="item.widget.type == 'picture'"
            disabled>
          <img v-if="form[item.key]" :src="form[item.key]" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-upload :action="action"
            v-else-if="item.widget.type == 'cover-pictures'"
            disabled>
          <img v-if="form[item.key]" :src="form[item.key]" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- <div v-for="(item,index) in this.itemsBian">
       <el-input v-if="item.widget.type='input'"  type="item.widget.type" placeholder="请输入名称" v-model="item.name"></el-input>
     </div>-->
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ListAccept">确 定</el-button>
  </span>