基於elementUI的Vue 中 el-from 包含el-table的寫法
阿新 • • 發佈:2019-01-11
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-table :data="ruleForm.evidenceTemplateList" stripe border style="width: 100%" size="mini"> <el-table-column type="index" label="序號" min-width="20" align="center"></el-table-column> <el-table-column align="center" label="操作" min-width="20"> <template slot-scope="scope"> <el-button type="text" @click="delSealRow(scope.row,scope.$index)" icon="el-icon-delete" size="small"></el-button> </template> </el-table-column> <el-table-column label="印鑑名稱" min-width="50" align="center"> <template slot-scope="scope" > <el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.sealName'" :rules='rules.sealName'> <el-input v-model="scope.row.sealName" size="small" :maxlength="30"></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="印鑑保管人部門" align="center"> <template slot-scope="scope"> <el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.sealKeeperDepartment'"> <el-input v-model="scope.row.sealKeeperDepartment" size="small" :maxlength="30" ></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="印鑑保管人職務" align="center"> <template slot-scope="scope"> <el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.sealKeeperJob'"> <el-input v-model="scope.row.sealKeeperJob" size="small"></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="印鑑保管人姓名" align="center"> <template slot-scope="scope"> <el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.sealKeeperName'"> <el-input v-model="scope.row.sealKeeperName" size="small"></el-input> </el-form-item> </template> </el-table-column> <el-table-column label="更新時間" align="center"> <template slot-scope="scope"> <el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.updateDate'"> <el-date-picker v-model="scope.row.updateDate" :disabled="true" type="date" size="small"></el-date-picker> </el-form-item> </template> </el-table-column> <el-table-column label="更新者" align="center"> <template slot-scope="scope"> <el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.updateUser'"> <el-input v-model="scope.row.updateUser" size="small" :disabled="true"></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form>
data() {
return {
ruleForm:{
evidenceTemplateList:[]
},
rules:{
sealName:[
{ required: true, message: '請輸入印鑑名稱', trigger: 'blur'}
]
},
removeSealDescriptionIdArray:[],//要刪除的table每一行 的SealDescriptionId陣列
}
},