tabel套from
##根据业务需求我们需要使用进行填写明细表，表中可能有多个类型的输入例如：日期，文本，数字，下拉等等，根据表单的验证规则进行明细表的验证看他是否填写完毕
问题：
单个使用form表单的时候label上都会自带一个*标识符表示是必填项，但是当使用table进行嵌套from的时候必填项就不会进行渲染需要我们自己手动进行渲染
解决方法：
1.使用el-table中的自定义表头进行渲染
2.使用table-cloumn中的方法进行渲染
3.使用css进行表头渲染
1.使用el-table中的自定义表头进行渲染
单个写如果某一列需要必填那么在他当前列进行header渲染
<el-table-column
prop="name"
label="付款阶段名称"
>
<template slot="header">
<span>
<i style="color:#F56C6C; font-size: 16px;font-weight: bold;margin-right: 3px;">*</i>
付款阶段名称
</span>
</template>
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.name'"
:rules="payment.rules.name"
>
<el-input :maxlength="999" v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>tipes：
form中的model还有tabel中的data要进行关联不然验证不起效果
2.使用table-column中的方法进行渲染
模版
<el-table-column
v-for="(item,index) in contract.fileList"
:key="item.label"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
:render-header="renderHeader"
>
js代码
renderHeader(h, { column }, rules) {
let arr = [];
for (let key in rules) {
arr.push(key);
}
if (arr.includes(column.property)) {
return [
h("span", { style: "color:red" }, "*"),
h("span", "" + column.label),
];
} else {
return [h("span", "" + column.label)];
}
},3.通过css进行渲染
css部分
.el-table th.must > .cell:before {
content: "*";
color: #f56c6c;
}
模版部分
<el-table
:header-cell-class-name="must"
//其他配置自行添加
></table>
js部分
//根据表头的下标位置进行渲染红星
must(obj) {
if (obj.columnIndex == 1 || obj.columnIndex == 2) {
return "must";
}
},tips：如果是form嵌套form的话进行动态增加输入框数据那么需要注意
form套from
问题：在使用的时候可能会碰到使用from组件单是内不还是会嵌套输入框的情况出现和table嵌套form很像只是展示的方式不相同，但是思路还是一样的都是需要进行prop的关联
想要的：
由于使用的是组件中的from然后再template嵌套了一个form进行渲染出来的from，需求的话死进行点击新增下面的下拉值进行增加一行三个，同时进行表单验证的渲染，
template
组件
<Form
v-if="Undertaking.Visible"
v-model:data="Undertaking.UndertakingformDate"
:labelList="Undertaking.UndertakinglabelList"
:rules="Undertaking.Undertakingrules"
>
<template #campsiteIds> 插槽
看这里
<el-form :model="Undertaking" label-width="120px" :rules="Undertaking.Undertakingrules" ref="coursesForm">
<el-row
:gutter="24"
justify="space-around"
v-for="(item, index) in Undertaking.UndertakingformDate.courses"
:key="index"
>
<el-col :md="7" :lg="7" :xl="7">
<el-form-item label="机构/基地课程"
:prop="'UndertakingformDate.courses.' + index + '.campsiteOrbase'"
:rules="Undertaking.Undertakingrules.campsiteOrbase"
>
<el-select
v-model="item.campsiteOrbase"
placeholder="请选择"
clearable
>
<el-option value="机构课程" />
<el-option value="基地课程" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-col :md="3" :lg="3" :xl="3">
<el-button
@click="underDelet(index)"
v-if="Undertaking.UndertakingformDate.courses.length > 1" type="danger" size="small"
>删除</el-button
>
</el-col>
</el-form>
</template >
</Form>
那么内部嵌套的第二个from的话需要是一个对象和上面table嵌套from的model绑定的是相同的，可以看上面的，
这里由于我是在date中还有一个数组相当于多嵌套了一层
问题：刚开始直接:prop="'courses.' + index + '.campsiteOrbase'" 然后进行表单验证的时候表单验证失效，使用validate进行自定义验证也是相同的表示拿不到值试了额很多种方法包括直接手动进行ref再select中change中调取表单验证（毫无效果，最后都放弃喊后端验证非空了）
解决：
原因的话就是我刚才说的数据不是直接一个list数组，而是在一个一个data对象中包含了一个数组
格式大概是： obj={name:'小花'，courses：[{campsiteOrbase:'子list1'},{campsiteOrbase:'子list2'}]}
所以关联form-item的时候需要将obj对象的名字一起带上就可以了
:prop="'UndertakingformDate.courses.' + index + '.campsiteOrbase'"
Undertakingrules我使用了一个rules进行关联
Undertakingrules: {
telephone: [
{
required: true,
validator: validatePhoneNumber,// 自定义验证方法
trigger: ["blur"],
},
],
campsiteOrbase: [
{
required: true,
message:'请选择', ///这里就是上面关联的rules
trigger: ["blur"],
},
],
},
上面这种方式是form渲染的时候obj中带list的
这段是setup中的基础数据 外层还有一个名子
stepFourForm: {
data: {},
labelDate: [{ timeNode: "", arrangement: "" }],
rules: {
name: [
{
required: true,
validator: validate,
trigger: ["change"],
},
],
timeNode: [
{
required: true,
message: "请输入",
trigger: ["change"],
},
],
arrangement: [
{
required: true,
message: "请输入",
trigger: ["change"],
},
],
},
labelList: [
{
label: "课程安排",
value: "课程安排",
type: "lineTitle",
show: false,
},
{
label: "课程安排",
value: "name",
span: 24,
type: "slot",
slot: "classarrange",
required: true,
},
],
},
template
<Form
v-model:data="state.stepFourForm.data"
:labelList="state.stepFourForm.labelList"
:isShowClose="false"
:isShowSave="false"
:colNum="1"
:disabled="fromDisabled"
ref="form4"
>
<template #classarrange>
<el-button
type="primary"
@click="handlerClassarrangeAdd"
>新增课程安排</el-button
>
<el-form
:model="state.stepFourForm"
ref="FourForm"
:rules="state.stepFourForm.rules"
>
<el-row
:gutter="24"
justify="space-around"
v-for="(item, index) in state.stepFourForm.labelDate" 这里开始遍历咯
:key="index"
>
<el-col :md="24" :lg="24" :xl="24" v-if="state.stepFourForm.labelDate.length >1 "> 这里如果只有最后一个的话不显示删除，多个才显示删除
<el-button
type="danger"
@click="
() => {
state.stepFourForm.labelDate.splice(index, 1);
}
"
size="small"
>删除</el-button
>
</el-col>
<el-col :md="24" :lg="24" :xl="24">
<el-form-item
label="时间节点"
:prop="'labelDate.' + index + '.timeNode'" 看这里表示关联的labelDate就是一个单纯的数组素以不需要再外面再加一层哦
:rules="state.stepFourForm.rules.timeNode"
>
<el-input
v-model.trim="item.timeNode"
:placeholder="'请输入'"
:disabled="fromDisabled"
/>
</el-form-item>
</el-col>
<el-col :md="24" :lg="24" :xl="24">
<el-form-item
label="具体安排"
:prop="'labelDate.' + index + '.arrangement'"
:rules="state.stepFourForm.rules.arrangement"
>
<Editor //这个是一个富文本框组件
v-model:data="item.arrangement"
:api="ToolsService.editor_FileUpload"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
</Form>
这个是直接使用form套from没有外层对象直接是list进行关联的方法，没有写那么细自己看看吧
4586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
