效果:
代码:
template:
<el-table class="tipsTable"
@click.stop
ref="tipsTable"
:data="formDetail.tipsTable"
highlight-current-row
@selection-change="handleSelectionChange"
:header-cell-style="{ color: 'rgba(51, 51, 51, 1)',background: '#F6F7F9'}">
<el-table-column v-if="formDetail.status == 1 || formDetail.status == 5" type="selection" width="60" align="center" />
<el-table-column type="index" label="序号" width="80" align="center" />
<el-table-column label="提示语" prop="tip">
<template #default="{row}">
<el-input v-if="formDetail.status == 1 || formDetail.status == 5"
style="width:100%"
v-model="row.tip"
placeholder="" />
<div v-else>{{row.tip}}</div>
</template>
</el-table-column>
<el-table-column label="必填设置" prop="radio" width="150">
<template #default="{row}">
<div v-if="formDetail.status == 1 || formDetail.status == 5">
<el-checkbox v-model="row.checked" label="1">{{}}</el-checkbox>
<span>设为必填项</span>
</div>
<div v-else>{{row.checked ? '必填项' : '非必填项'}}</div>
</template>
</el-table-column>
</el-table>
script:
multipleSelection: null,
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 报名内容设置-删除一条提示
delTips() {
if(this.multipleSelection && this.multipleSelection.length) {
this.multipleSelection.forEach((item) => {
this.formDetail.tipsTable.forEach((data,i) => {
if(item.tip == data.tip) {
this.formDetail.tipsTable.splice(i, 1)
}
})
})
} else {
this.$message.warning('请选择需要删除的选项')
}
},