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：加载机制