<template> <div class="edit-fill-table"> <el-form ref="modalFormComp" :model="modalForm" :rules="rules" :key="modalForm.id" label-width="100px" > <el-form-item prop="tdCount" label="行列数:"> <el-row> <el-col class="text-right" :span="3"> <span>行:</span> </el-col> <el-col :span="6"> <el-input-number style="width: 60px" v-model="modalForm.rowCount" :min="2" :max="16" :step="1" step-strictly :controls="false" ></el-input-number> </el-col> <el-col class="text-right" :span="3"> <span>列:</span> </el-col> <el-col :span="6"> <el-input-number style="width: 60px" v-model="modalForm.colCount" :min="2" :max="16" :step="1" step-strictly :controls="false" ></el-input-number> </el-col> </el-row> </el-form-item> <el-form-item prop="padding" label="网格内边距:"> <el-row> <el-col class="text-right" :span="3"> <span>上下:</span> </el-col> <el-col :span="6"> <el-input-number style="width: 60px" v-model="modalForm.paddingTop" :min="2" :max="16" :step="1" step-strictly :controls="false" ></el-input-number> </el-col> <el-col class="text-right" :span="3"> <span>左右:</span> </el-col> <el-col :span="6"> <el-input-number style="width: 60px" v-model="modalForm.paddingLeft" :min="2" :max="16" :step="1" step-strictly :controls="false" ></el-input-number> </el-col> </el-row> </el-form-item> <el-form-item label="线条类型:"> <line-style-select v-model="modalForm.lineStyle"></line-style-select> </el-form-item> <el-form-item label="字号:"> <size-select v-model="modalForm.fontSize"></size-select> </el-form-item> <el-form-item prop="lineHeight" label="行高:"> <el-input-number style="width: 125px" v-model="modalForm.lineHeight" :min="20" :max="100" :step="1" step-strictly :controls="false" ></el-input-number> </el-form-item> <el-form-item label="网格内容设置:"></el-form-item> <table class="table table-nopad"> <tr v-for="rowNo in modalForm.rowCount" :key="rowNo"> <td v-for="colNo in modalForm.colCount" :key="colNo"> <el-input v-model="modalForm.content[`${rowNo}_${colNo}`]" clearable style="width: 100%" ></el-input> </td> </tr> </table> </el-form> </div> </template> <script> import LineStyleSelect from "../../components/common/LineStyleSelect"; import SizeSelect from "../../components/common/SizeSelect"; import { deepCopy, objAssign } from "../../plugins/utils"; const initModalForm = { id: "", colCount: 3, rowCount: 3, paddingTop: 5, paddingleft: 5, fontSize: "14px", lineHeight: 30, lineStyle: "solid", content: {}, }; export default { name: "edit-fill-table", components: { LineStyleSelect, SizeSelect }, props: { instance: { type: Object, default() { return {}; }, }, }, data() { const tdCountValidater = (rule, value, callback) => { if (!this.modalForm.rowCount || !this.modalForm.colCount) { return callback(new Error("请输入完整的行列数")); } callback(); }; const paddingValidater = (rule, value, callback) => { if (!this.modalForm.paddingTop || !this.modalForm.paddingleft) { return callback(new Error("请输入完整的网格内边距")); } callback(); }; return { modalForm: { ...initModalForm }, rules: { tdCount: [ { required: true, validator: tdCountValidater, trigger: "change", }, ], padding: [ { required: true, validator: paddingValidater, trigger: "change", }, ], }, }; }, mounted() { this.initData(this.instance); }, methods: { initData(val) { this.modalForm = objAssign(initModalForm, val); this.modalForm.paddingTop = val.padding[0]; this.modalForm.paddingLeft = val.padding[1]; let content = {}; for (let rowNo = 0; rowNo < val.rowCount; rowNo++) { for (let colNo = 0; colNo < val.colCount; colNo++) { const field = `${rowNo}_${colNo}`; content[field] = val[field] || ""; } } this.modalForm.content = content; }, async submit() { const valid = await this.$refs.modalFormComp.validate().catch(() => {}); if (!valid) return; const data = deepCopy(this.modalForm); const model = objAssign(this.instance, data); model.padding = [data.paddingTop, data.paddingLeft]; this.$emit("modified", model); }, }, }; </script> <style scoped> .table-nopad td, .table-nopad th { padding: 0; } </style>