可以在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方法,该方法接收当前行的数据作为参数,在该方法中可以处理删除操作,例如从数组中移除该行数据

JVxeTable columns=prjColumnssetup const prjColumns = ref title 名称 dataIndex prjname key prjname width 120px title 单位 dataIndex unitname key unitname width 100px title 单

原文地址: http://www.cveoy.top/t/topic/iRQY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录