<template>
<!-- 巡查计划 - 新增巡查点位 -->
<el-dialog :visible.sync="dialogShow1" title="新增巡查点位" width="800" top="15vh" @close='handleCancle'>
<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
<el-table :data="ruleForm.tableData" border style="width: 100%;">
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
<el-table-column prop="objType" label="巡查对象类型" align="center">
<template v-slot="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.objType'" :rules="rules.objType" :style="{marginBottom:marginBottomNum}">
<el-select clearable v-model="scope.row.objType" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="objName" label="巡查对象/点位名称" align="center">
<template v-slot="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.objName'" :rules="rules.objName" :style="{marginBottom:marginBottomNum}">
<el-select clearable v-model="scope.row.objName" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="lat" label="点位经纬度" align="center">
<template v-slot="scope">
<el-form-item :style="{marginBottom:marginBottomNum}">
<el-input disabled v-model="scope.row.lat"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" style="color: red;" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="getSave('ruleForm')">保存</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
components: {},
props: {
// 弹窗是否显示
dialogShow: {
type: Boolean,
default: false,
},
},
data() {
var objType = (rule, value, callback) => {
console.log("sdfsdfs:", value);
if (!value) {
callback(new Error("请选择巡查对象类型"));
} else {
this.marginBottomNum = "0px";
callback();
}
};
var objName = (rule, value, callback) => {
console.log("sdfsdfs:", value);
if (!value) {
this.marginBottomNum = "20px";
callback(new Error("请选择巡查对象/点位名称"));
} else {
callback();
}
};
return {
dialogShow1: this.dialogShow,
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
ruleForm: {
tableData: [{ objType: "", objName: "" }],
},
rules: {
objType: [{ require: true, validator: objType, trigger: "change" }],
objName: [{ validator: objName, trigger: "change" }],
},
marginBottomNum: "0px",
};
},
created() {},
methods: {
// 保存
getSave(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log("验证通过");
} else {
console.log("error submit!!");
return false;
}
});
},
// 删除
handleDelete() {},
// 取消
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 右上角叉号
handleCancle() {
this.$emit("close", this.dialogShow1);
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
margin-bottom: 0;
}
</style>
elementui - table中下拉进行验证
最新推荐文章于 2024-05-22 17:31:43 发布