vue：弹框

 

 

vue第九课  

<el-image
          :src="kingico"
          @click="isshow()"
        ></el-image>

图片框

 

 <el-row>
        <el-col
          :span="2"
          v-if="show"
        >
          
        </el-col>

        <el-col :span="8">
 </el-col>
      </el-row>

col 横排

row 竖排 

 

 <el-input
              clearable
              style="width:200px;"
              size="mini"
              v-model="query.find"
              placeholder="请输入"
            ></el-input>
            <el-select
              size="mini"
              clearable
              v-model="query.type"
              placeholder="请选择"
              filterable
              @change="find()"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>

输入框和下拉框

 

el-dialog

<el-dialog
      title="区域"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-form
          size="mini"
          ref="city"
          :model="city"
          label-width="100px"
        >
          <el-form-item label="代号">

            <el-input
              style="width:300px;"
              size="mini"
              v-model="city.id"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input
              style="width:300px;"
              size="mini"
              clearable
              v-model="city.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="上级">
            <el-input
              style="width:300px;"
              size="mini"
              clearable
              v-model="city.father"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              style="width:300px;"
              size="mini"
              clearable
              v-model="city.type"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>

          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="resetForm('city')"
        >取 消</el-button>
        <el-button
          size="mini"
          @click="submitForm('city')"
        >确 定</el-button>
      </div>
    </el-dialog>

clearable：清除 在框的末尾，鼠标移动到框末尾，会出现清除符，可清除框的内容

readonly：只读，框中内容不可编辑。对下拉框无效

filterable：下拉框的筛选属性，输入某字，可从下拉框模糊 筛选出相应的值 ，等同于 sql 中的like

 size="mini"：框 下拉框，都默认是最小的，比如，框的宽度会默认系统最小

 

 

js 方法

  activated() {},


getNodeData(r) {
      this.city = r
      this.dialogVisible = true
    },
    putSuccess() {
      this.$message.success('成功!')
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogVisible = false
          this.$message.success('成功!')
        } else {
          this.$message.console.error('失败!')
          dialogVisible = false
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },

this.$refs：获取表单数据

activated：加载机制