vue实现一个简单的审批绘制功能
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>