iview中如何动态增减表单项

最新推荐文章于 2022-12-09 10:23:30 发布

坚书直实i

最新推荐文章于 2022-12-09 10:23:30 发布

阅读量465

点赞数

分类专栏：笔记文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_48674314/article/details/125051521

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js编写的组件，展示了一个服务选择和管理的模态对话框。用户可以添加、删除服务，并为每个服务选择名称和设置单价。当用户点击确定时，会进行表单验证，确保所有字段完整。组件中使用了Less进行样式定义，以及Element UI的Select和Input组件。

摘要由CSDN通过智能技术生成

<style lang="less" scoped>
.text {
  font-size: 16px;
  font-weight: 700;
}
.icon{
  margin-left: 10px;
  cursor: pointer;
}
</style>

<template>
  <div>
    <Modal v-model="showCare" footer-hide width="600">
      <p class="text">选择服务</p>
      <Form :label-width="100" ref="form" :model="formDynamic">
        <Row style="margin-bottom:20px;">
          <Col :offset="18">
            <Button type="primary" ghost @click="choose">添加</Button>
          </Col>
        </Row>
        <Row v-for="(item,key) in formDynamic.service" :key="key" v-if="item.status">
          <Col span="11">
            <FormItem label="服务名称" :rules="{required: true, message: '必填项', trigger: 'change'}" :prop="'service.'+key+'.serviceName'">
              <Select v-model="item.serviceName" clearable filterable>
                <Option v-for="(item,index) in serviceNameList" :value="item" :key="index">{{item}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="单价" :rules="{required: true,type:'number', message: '必填项', trigger: 'blur'}" :prop="'service.'+key+'.unitPrice'">
              <Input v-model="item.unitPrice" clearable type="number" number></Input>
            </FormItem>
          </Col>
          <Col span="1">
            <Icon type="md-close-circle" size="30" class="icon" @click="remove(key)"></Icon>
          </Col>
        </Row>
        <Row>
          <Col :offset="15">
            <Button type="primary" ghost @click="cancel">取消</Button>
            <Button type="primary" style="margin-left:30px;" @click="ascertain">确定</Button>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  data(){
    return {
      
      showCare:false,
      serviceNameList:["文章","门诊","问诊","住院","视频讲座","现场讲座"],
      formDynamic:{
        service:[
          {
            serviceName:"",
            unitPrice:"",
            status:1,
          }
        ],
      }
    }
  },
  methods:{
    cancel(){
      this.showCare = false
      this.formDynamic.service = []
    },

    ascertain(){
      this.$refs.form.validate(valid=>{
        if(valid){

        }else {
          this.$Message.error({
            background:true,
            content:"请填写完整！"
          })
        }
      })
    },

    remove(index){
      this.formDynamic.service.splice(index,1)  
    },

    choose(){
      let obj = {
        serviceName:"",
        unitPrice:"",
        status:1,
      }
      this.formDynamic.service.push(obj)
    }
  }
}
</script>

效果：