批量删除功能(VUE3语法)
使用element ui -el-table方式编写
功能点:点击全选/单选可以进行删除
<el-table :data="date" ref="grayscaleTableRef" min-height="288" max-height="510" style="width: 100%" header-row-class-name="tableHeader" :header-cell-style="{ background: '#F0F2F5', fontFamily: 'PingFangSC-Regular', fontWeight: '400', color: '#222D38', }" @selection-change="checked1" :row-class-name="rowClassName" > <el-table-column type="selection" width="55" > </el-table-column>
</el-table>
<script lang="ts" setup> import { reactive, ref,onMounted } from "vue"; import { useRouter } from "vue-router"; import { ElMessage } from "element-plus"; import RdUploadDir from "../../components/RdUploadDir.vue"; import { saveVersionInfo } from "../../api/application"; import { getWebSourceOssFileUrl, getWebSourcePackagePath, ossUploadZip, } from "../../hooks/useRdUploadDir"; import { envOptions } from "../../utils/base"; import { ClientType } from "../../types/enum"; const tableDataA = [ { date: "", name: "", address: "", }, { date: "", name: "", address: "", }, { date: "", name: "", address: "", }, { date: "", name: "", address: "", }, { date: "", name: "", address: "", }, // { // date: "2016-05-06", // name: "Tom", // address: "No. 189, Grove St, Los Angeles", // }, // { // date: "2016-05-07", // name: "Tom", // address: "No. 189, Grove St, Los Angeles", // }, ]; let date = ref([...tableDataA]); let copeTable = []; let selectedIds: number[] = []; const grayscaleTableRef = ref(); const createAron = () => { date.value.push({ date: "", name: "", address: "", }); setTimeout(() => { //1、50为每一行的高度;2、 accountList.value.length为数据数量 let ScrollTop = 50 * date.value.length; grayscaleTableRef.value.setScrollTop(ScrollTop); }, 100); }; const grayscaleMemberDeletion = ((index: number) => { date.value.splice(index,1) }) const checked1 = ((selectionArr: any[]) => { copeTable = selectionArr; selectedIds = selectionArr.map((item: { index: any; }) => item.index) console.log(selectedIds,'abc') }) const rowClassName =((row: { row: { index: any; }; rowIndex: any; }, index: any)=>{ row.row.index = row.rowIndex; }) const batchDeleteGrayscaleMember = (() => { if (copeTable.length != 0) { let obj = []; // data 为el-table源数据 obj = date.value.filter((item, index) => { return !selectedIds.includes(index); }); date.value = obj; } }) </script>