1、vue代码
<div class="approval">
<div class="approval_ul" v-for="(item,key) in approvalList" :key="key">
<div>
<el-radio-group v-model="item.jointlySign">
<el-radio label="1">会签</el-radio>
<el-radio label="2">抄送</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 15px;">
<el-select v-model="item.approvalPersonnel" placeholder="请选择" size="mini">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<div class="remove" title="删除" @click="removeClick(key)">x</div>
</div>
<div class="operation">
<el-button size="mini" @click="addClick"><b><i class="el-icon-plus"></i></b></el-button>
</div>
<el-button size="mini" @click="submitClick"><b>提交</b></el-button>
</div>
<script>
export default {
name: "approval",
data(){
return {
options: [
{
label: '张三',
value: '1'
},{
label: '李四',
value: '2'
},
],
approvalList: [
{
jointlySign: '1', // 1: 会签, 2: 抄送
approvalPersonnel: '', // 审批人员
},
]
}
},
mounted() {
},
methods: {
/**删除 */
removeClick(key){
this.approvalList.splice(key,1);
},
/**添加 */
addClick(){
let obj = {
jointlySign: '1', // 1: 会签, 2: 抄送
approvalPersonnel: '', // 审批人员
}
this.approvalList.push(obj)
},
/**提交 */
submitClick(){
console.log(this.approvalList,'-=-=-=-')
},
}
}
</script>
<style scoped lang="scss">
.approval{
width: 420px;
.approval_ul{
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
position: relative;
margin-bottom: 45px;
.remove{
width: 20px;
height: 20px;
background: #99CCFF;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 0 5px 0 5px;
}
}
.approval_ul::after {
content: '';
position: absolute;
width: 2px;
height: 30px;
background-color: #ccc;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
}
.operation{
width: 100%;
display: flex;
justify-content: center;
}
}
</style>