JVxeTable columns=prjColumnssetup const prjColumns = ref title 名称 dataIndex prjname key prjname width 120px title 单位 dataIndex unitname key unitname width 100px title 单
可以在prjColumns中新增一列操作,每行一个按钮,点击按钮删除当前行数据。可以使用Vue的v-slot来实现这个功能。具体代码如下:
<template>
<JVxeTable :columns="prjColumns">
<template v-slot:operation="scope">
<button @click="deleteRow(scope.row)">删除</button>
</template>
</JVxeTable>
</template>
<script>
export default {
setup() {
const prjColumns = ref([
{ title: '名称', dataIndex: 'prjname', key: 'prjname', width: '120px' },
{ title: '单位', dataIndex: 'unitname', key: 'unitname', width: '100px' },
{ title: '单价', dataIndex: 'price', key: 'price', width: '100px' },
{ title: '产地', dataIndex: 'ypcd', key: 'ypcd', width: '150px' },
{ title: '单位剂量', dataIndex: 'yxhl', key: 'yxhl', width: '120px' },
{ title: '自付比例', dataIndex: 'zfbl', key: 'zfbl', width: '120px' },
{ title: '适应症', dataIndex: 'syz', key: 'syz', width: '150px' },
{ title: '院内编码', dataIndex: 'bwm', key: 'bwm', width: '200px' },
{ title: '操作', key: 'operation', width: '80px', slot: 'operation' },
]);
const deleteRow = (row) => {
// 在这里处理删除操作,例如从数组中移除该行数据
};
return {
prjColumns,
deleteRow,
};
},
};
</script>
在以上代码中,我们在prjColumns中新增了一列操作,其中key为'operation',宽度为'80px',并使用了v-slot来自定义该列的内容。按钮的点击事件绑定了deleteRow方法,该方法接收当前行的数据作为参数,在该方法中可以处理删除操作,例如从数组中移除该行数据
原文地址: http://www.cveoy.top/t/topic/iRQY 著作权归作者所有。请勿转载和采集!