父组件
<TableBoxref="tableBoxRef":tableDatas="tableData":page="page"@delRow="delRow":table_columns="table_columns">
</TableBox>
<script>
import TableBox from './components/tableBox.vue'
export default {name: 'reimblist',components: {TableBox},setup() {const tableData: []const page: {currentPage: 1,pageSize: 10,totalPage: 0}const table_columns: [{title: '单据编号',dataIndex: 'reimbursementNo',key: 'reimbursementNo',align: 'center',slots: { customRender: 'reimbursementNo' },width: 150,show: true},{title: '单据类型',dataIndex: 'formName',key: 'formName',width: 130,show: true}]const delRow = async (record) => {Modal.confirm({title: () => '是否确认删除?',icon: () => createVNode(ExclamationCircleOutlined),okText: () => '确定',okType: 'danger',cancelText: () => '取消',onOk() {delReimbApi({ id: record.id }).then((res) => {if (res.success) {message.success(res.message)queryTable()} else {message.error(res.message)}})},onCancel() {console.log('Cancel')}})}return {page,table_columns,tableData,delRow}}
}
子组件
<template><CommonTable:columns="table_columns.filter((col,num)=> {if(col.show){return col}})":dataSource="tableDatas":scrollX="1300":page="page"><template #reimbursementNo="{ record }"> <a-button type="text" danger @click="delRow(record)" v-if="record.state == 0">删除</a-button></template></CommonTable>
</template>
export default {components: {CommonTable},props: {tableDatas: {type: Array,default: () => []},page: {default: () => {},type: Object},table_columns: {type: Array,default: () => []}},setup(props, { emit }) {const delRow = (record) => {emit('delRow', record)}return {delRow}}
}
</script>