<div id="app">
<el-form class="base-form" ref="baseForm" :model="baseForm" :rules="rules" auto-complete="on">
<el-table ref="table-input" class="table" highlight-current-row :data="baseForm.demoList">
<el-table-column label="姓名" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.name'" :rules="rules.name" class="all">
<el-input v-model="scope.row.name" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.name`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="年龄" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.age'" :rules="rules.age" class="all">
<el-input v-model="scope.row.age" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.age`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="出生日期" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.birthday'" :rules="rules.birthday" class="all">
<el-date-picker placeholder="请选择" v-model="scope.row.birthday" format="yyyy-MM-dd" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.birthday`)"></el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="详细地址" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.address'" :rules="rules.address" class="all">
<el-input v-model="scope.row.address" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.address`)"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<div class="flex-c-a margin-top-10">
<el-button @click="submit">提交</el-button>
</div>
</div>
两层
```javascript
<el-form :model="allData" :rules="rules" ref="ruleForm">
<el-table
ref="multipleTable"
:data="allData.tableData"
tooltip-effect="dark"
style="width: 100%"
border
>
<template v-for="(data, index) in column">
<el-table-column
v-if="data.label == '属性列表'"
:prop="data.prop"
:label="data.label"
align="center"
:key="index"
>
<template slot-scope="scope">
<div
v-for="(item, index1) in scope.row.argKeyList"
:key="index1"
v-if="
scope.row.isSupportShortcutConfig == 1 && isFilter == true
"
>
<el-row :span="24">
<el-col :span="1" style="margin-top: 8px">
<el-checkbox v-model="item.isChecked"></el-checkbox>
</el-col>
<el-col :span="8">
<el-form-item label="属性名称:" label-width="66px">
<el-tooltip :content="item.name" placement="top">
<el-input
v-model="item.name"
size="mini"
:disabled="true"
></el-input>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="8" style="margin-left: 0px">
<el-form-item
label="属性值:"
label-width="66px"
:rules="rules.value"
:prop="
'tableData.' +
scope.$index +
'.argKeyList.' +
index1 +
'.value'
"
>
<el-input v-model="item.value" size="mini"></el-input>
</el-form-item>
</el-col>
<el-col :span="7" style="margin-left: 0px">
<el-form-item label="备注:" label-width="45px">
<el-tooltip :content="item.remark" placement="top">
<el-input
v-model="item.remark"
size="mini"
:disabled="true"
></el-input>
</el-tooltip>
</el-form-item>
</el-col>
</el-row>
</div>
<div
v-if="
scope.row.isSupportShortcutConfig == 0 && isFilter == true
"
>
<el-row :span="24">
<el-col :span="1" style="margin-top: 8px">
<el-checkbox
v-model="scope.row.isChecked"
></el-checkbox>
</el-col>
<el-col :span="14" style="margin-left: 0px">
<el-form-item
label="属性值:"
label-width="60px"
:prop="'tableData.' + scope.$index + '.value'"
:rules="rules.value"
>
<el-input
v-model="scope.row.value"
size="mini"
></el-input>
<div></div>
</el-form-item>
</el-col>
</el-row>
</div>
<el-row :span="24" v-if="isFilter == false">
<el-col :span="16">
<el-form-item
label="属性值:"
:rules="rules.predicateAttributeValue"
:prop="
'tableData.' +
scope.$index +
'.predicateAttributeValue'
"
label-width="66px"
>
<el-input
v-model="scope.row.predicateAttributeValue"
placeholder="请输入内容"
size="small"
></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <el-form label-width="66px" v-if="isFilter == false">
<el-row :span="24">
<el-col :span="16">
<el-form-item
label="属性值:"
prop="predicateAttributeValue"
>
<el-input
v-model="scope.row.predicateAttributeValue"
placeholder="请输入内容"
size="small"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form> -->
</template>
</el-table-column>
<el-table-column
v-else
:prop="data.prop"
:label="data.label"
align="center"
:key="index"
:width="data.width"
></el-table-column>
</template>
</el-table>
</el-form>
element el-table表格校验输入框
最新推荐文章于 2024-05-30 14:17:35 发布