使用Element-ui编辑弹框

演示如何使用Element-ui编辑弹框，编辑弹框，就是点击按钮触发事件，对内容进行新增或编辑，之后点击确定按钮进行保存操作。

 <el-dialog>：对话框组件，用于展示弹出窗口(弹窗/弹框)。

<el-form>：包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

其中的属性：

1、ref: 获取表单对象信息；
2、rules：用于定于表单验证规则，它是通过<el-form-item>中的prop获取数据源，而数据是从v-model获取，双向绑定；

3、@keyup.enter.native：使用键盘上回车键(Enter)提交表单数据；

4、下拉框选择器之远程搜索：即输入关键词到后端(getRegionList接口)返回的下拉框数据选项。（:multiple="false" 这里是单选，所以定义的value不是数组类型)；

5、限制input输入框只能是数字(有小数点)：οninput="value=value.replace(/^([0-9-]\d*\.?\d{0,3})?.*$/,'$1')"

6、限制input输入框只能是数字(无小数点)：οninput="value=value.replace(/[^\d]/g, '')"

7、限制最大长度：maxlength="18"

另外：

限制input输入框的一些空格操作：

1、@blur="regionForm.regionNameZh=$event.target.value.trim()"

2、v-model.trim

只要内容不为空的情况下，2的弊端是在输入英文或者其他状况下需要到中间才能给空格，而不能在尾部直接给空格。
 

<!-- 编辑弹框 -->
    <el-dialog title="编辑" :visible.sync="dialogVisible" :before-close="handleClose">
      <el-form :rules="rules" ref="ruleForm" :model="dataForm" label-width="120px" :inline="true" label-position="right" @keyup.enter.native="handleDialogOk">
        <el-form-item label="景区" prop="regionId">
          <el-select v-model="dataForm.regionId" :multiple="false" :filterable="true" :remote="true" reserve-keyword placeholder="请输入关键词"
            :remote-method="getRegionList">
            <el-option v-for="item in regionList" :key="item.regionId" :label="item.regionName" :value="item.regionId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠价格" prop="low">
          <el-input v-model="dataForm.low" maxlength="18" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,3})?.*$/,'$1')"></el-input>
        </el-form-item>
        <el-form-item label="人流量" prop="volume">
          <el-input v-model="dataForm.volume" maxlength="18" oninput="value=value.replace(/[^\d]/g, '')"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleDialogOk">确 定</el-button>
      </span>
    </el-dialog>

export default {
  name: "Test",
  data() {
    return {
      dataForm: {},
      dialogVisible: false,
      rules: {
        regionId: [
          { required: true, message: '景区不能为空', trigger: 'blur' }
        ],
        low: [
          { required: true, message: '优惠价不能为空', trigger: 'blur' }
        ],
        volume: [
          { required: true, message: '人流量不能为空', trigger: 'blur' }
        ]
      },
      regionList: []
    };
  },
 
  methods: {
    // 打开新增数据弹窗
    handleAdd() {
      this.dialogVisible = true;
      this.dataForm= {}
    },
    // 打开编辑弹窗
    handleClick(val) {
      this.dialogVisible = true;
      this.dataForm= {...val};// 对表单进行重置，即修改表单的数据不想保存，关闭弹框，数据不会跟着变。

    },
    // 编辑确定按钮
    handleDialogOk() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          const res = await saveDataAPI(this.dataForm)
          this.$message({ type: 'success', message: res.msg })
          this.dialogVisible = false
        }
      });
    },
    // 关闭弹框
    handleClose() {
      this.$refs['ruleForm'].resetFields();    
      this.dialogVisible = false;
    },
    // 下拉框选择的数据
    async getRegionList(keyword) {
      const res = await getRegionOptionByKeyword(keyword != null && keyword.trim() != "" ? keyword.trim() : '');
      if (res.code == 200) {
        this.regionList = res.data;
      }
    }

  }
};