elment ui 表格中输入验证

特殊需求，要在表格中进行输入信息并做校验

关键写法如下，自定义校验

<el-form-item :prop="'tableData.'+scope.$index+'.price'" :rules="rules.price">

 <el-form-item :prop="'tableData.'+scope.$index+'.num'" :rules="{required:true,message:'为啥这么贵？',trigger:'blur' }">

需要根据其他输入信息作判断的情况：

:rules="{required:scope.row.price > 10000 ? true : false,message:'为啥这么贵？',trigger:'blur' }"

<el-form :model="form" ref="formRef">

<el-table :data="form.tableData"

border

style="width: 100%"

:cell-style="{ padding: '0' }"

:row-style="{ height: '50px' }">

<el-table-column prop="pinpai"

label="品牌"

:show-overflow-tooltip="true"

align="center">

<template #default="scope">

<el-form-item :prop="'tableData.'+scope.$index+'.pinpai'" :rules="rules.pinpai">

<el-input v-model="scope.row.pinpai"></el-input>

</el-form-item>

</template>

</el-table-column>

<el-table-column prop="price"

label="价格"

:show-overflow-tooltip="true"

align="center">

<template #default="scope">

<el-form-item :prop="'tableData.'+scope.$index+'.price'" :rules="rules.price">

<el-input v-model="scope.row.price"></el-input>

</el-form-item>

</template>

</el-table-column>

<el-table-column prop="num"

label="数量"

:show-overflow-tooltip="true"

align="center">

<template #default="scope">

<el-form-item :prop="'tableData.'+scope.$index+'.num'" :rules="{required:true,message:'为啥这么贵？',trigger:'blur' }">

<el-input v-model="scope.row.num"></el-input>

</el-form-item>

</template>

</el-table-column>

<el-table-column prop="desc"

label="描述"

:show-overflow-tooltip="true"

align="center">

<template #default="scope">

<el-form-item :prop="'tableData.'+scope.$index+'.desc'" :rules="{required:scope.row.price > 10000 ? true : false,message:'为啥这么贵？',trigger:'blur' }">

<el-input v-model="scope.row.desc"></el-input>

</el-form-item>

</template>

</el-table-column>

</el-table>

<!-- <el-button type="primary" @click="submite">确定</el-button> -->

<a @click="submite">确定</a>

</el-form>

效果图：

 当输入价格大于10000时，描述变成必填项