<template> <div class="benefits"> <div> <div class="text-r"> <a-button type="danger" class="save-btn"> <Icon name="ssiadd" :size="14" />新增 </a-button> <a-table :pagination="false" :columns="considtionColumns" :data-source="conditionData" > <template slot="operation" slot-scope="text, record"> <a-button v-if="record.isEdit" type="link"> 保存 </a-button> <a-button v-else type="link"> 修改 </a-button> <a-button type="link" class="success">新增</a-button> <a-popconfirm title="你确定要关闭吗?" ok-text="确定" cancel-text="取消" > <a-button type="link" class="danger">删除</a-button> </a-popconfirm> </template> </a-table> </div> </div> <div> <div class="text-r"> <a-button type="danger" class="save-btn"> <Icon name="ssiadd" :size="14" />新增 </a-button> <a-table :pagination="false" :columns="benefitColumns" :data-source="benefitData" > <template slot="operation" slot-scope="text, record"> <a-button v-if="record.isEdit" type="link"> 保存 </a-button> <a-button v-else type="link"> 修改 </a-button> <a-button type="link" class="success">新增</a-button> <a-popconfirm title="你确定要关闭吗?" ok-text="确定" cancel-text="取消" > <a-button type="link" class="danger">删除</a-button> </a-popconfirm> </template> </a-table> </div> </div> </div> </template> <script> export default { props: { coverageForm: { type: Object, required: true, }, }, data() { const considtionColumns = [ { title: "限额", dataIndex: "index" }, { title: "操作", key: "operation", width: "175px", fixed: "right", scopedSlots: { customRender: "operation" }, }, ]; const benefitColumns = [ { title: "责任列表", dataIndex: "index" }, { title: "操作", key: "operation", width: "175px", fixed: "right", scopedSlots: { customRender: "operation" }, }, ]; return { considtionColumns, benefitColumns, conditionData: [{ index: "900" }], benefitData: [{ index: "测试" }], }; }, methods: {}, }; </script> <style lang="less" scoped> .benefits { .pa(0, 20, 10, 20); background-color: #fff; .save-btn { .mg-t(20); .mg-b(10); .icon-class { .mg-r(10); } } } </style>