html 部分
<el-table
ref="addPropertyTable"
:data="ruleForm.propertyList"
stripe
border
style="width: 100%;"
height="250"
:cell-style="cellStyleAlignCenter"
>
<el-table-column prop="name" label="名称" >
<template slot-scope="scope">
<el-form-item :prop="`propertyList.${scope.$index}.name`" class="tab-form"
style=" margin-bottom: 0" :rules="rulesTab.name">
<el-input v-model="scope.row.name" class="tool-inp" placeholder="请输入属性名称"/>
</el-form-item>
</template>
</el-table-column>
</el-table>
data数据
data() {
return {
ruleForm:{
propertyList:[
name:''
]
},
rulesTab: {
name: [
{ required: true, message: '请输入名称', trigger: ['blur','change'] }
]
}
}
}
为了能显示出提示文字,需要对 css 进行修改
<style lang="scss"> // 此处不可用scoped属性
.tab-form .el-form-item__error{
position: relative;
left: -20px;
line-height: 1 !important;
}
</style>
image.png
网友评论