element中定义的表单怎么使用以及Method “dialogFormVisible“ has already been defined as a data

主要想实现点击编辑按钮,出现表单填写的弹窗。如图
在这里插入图片描述

template中:
<!-- 表单 -->
    <el-button type="text" @click="dialogFormVisible = true"></el-button>//dialogFormVisible 是element封装的方法,true代表弹窗出现,false弹窗关闭
    <el-dialog title="修改案例" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row>//实现一行多列,如果想一行两列就包含两组<el-col>
          <el-col :span="10">
            <el-form-item label="案例名称" :label-width="formLabelWidth">
              <el-input
                maxlength="15"
                v-model="form.caseName"
                autocomplete="off"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="案例阶段" :label-width="formLabelWidth">
              <el-select v-model="form.evaluationPhase" placeholder="">
                <el-option label="申报" value="001" key="001"></el-option>//下拉框,建议value与key都存在,key在本项目中可以获取数据库中筛选的字段值
                <el-option label="跟踪" value="002" key="002"></el-option>
                <el-option label="自评" value="003" key="003"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>//对应上面的<el-row> 中间有两组<el-col>

        <el-row>
          <el-col :span="10">
            <el-form-item label="案例类型" :label-width="formLabelWidth">
              <el-select v-model="form.evaluationType" placeholder="">
                <el-option label="政策评价" value="001" key="001"></el-option>
                <el-option label="部门评价" value="002" key="002"></el-option>
                <el-option
                  label="项目支出评价"
                  value="003"
                  key="003"
                ></el-option>
              </el-select>
            </el-form-item>
            
         //此处删了图中'指标体系',因为语句有点多,其实跟上面都一样,省略
         
        <el-form-item label="案例描述" :label-width="formLabelWidth">
        //文本域
          <el-input
            type="textarea"
            :autosize="{ minRows: 3 }"
            v-model="form.caseDescribe"
            autocomplete="off"
            maxlength="1000" 
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

	
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>//type="primary":主要按钮,官方文档里有很多类型
      </div>

官方文档给的模板是↓

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

一开始不了解,胡乱复制下来也没具体看,里面重复定义了dialogVisible点击事件,所以导致一直报错。

[Vue warn]: Method "dialogFormVisible" has already been defined as a data pr_

如果取这两个按钮给其赋予方法,将脚部的两个click名称更改一下然后定义点击事件就可以了。

script部分:

//表单弹窗
export default {
  name: '***',
  props: {},
  data() {
    return {
      dialogFormVisible: false,
      form: {
        caseName: '',
        evaluationPhase: '',
        evaluationType: '',
        indicatorSystem: '',
        caseDescribe: ''
      },
      formLabelWidth: '80px',

以上代码只实现了图中上半部分表单框和右下角两个按钮

  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值