elementPuls 表格反選實現(xiàn)示例代碼

更新時間：2024年07月25日 11:12:26 作者：Oneself_lsl

這篇文章主要介紹了elementPuls 表格反選實現(xiàn)示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

真的在網上搜了很多資料發(fā)現(xiàn)根本實現(xiàn)不了反選 最下面有示例
然后去看了下官網
發(fā)現(xiàn)官網有教你怎么選中某個值的方法官網中的”多選“
官網地址

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
      Toggle selection status of second and third rows
    </el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
interface User {
  date: string
  name: string
  address: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    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',
  },
]
</script>

既然官網有辦法選中某個值
那反選是不是簡單了很多
以下是個人代碼
第一步獲取已選中的值和未選中的值

<el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    綁定切換選中時候的數據
    @selection-change="handleSelectionChange"
  >
  </el-table>
  <div @click="invertSelection(state.noCheckList)"
      style="width: 114rem;height: 35rem;border: 1rem solid #9D9D9D;border-radius: 10rem;font-size: 15rem;color: #5C6170;display: flex;align-items: center;margin: 0 20rem;cursor: pointer;">
      <img style="height: 15rem;margin: 0 10rem 0 15rem;" src="../../../assets/選擇-反向選擇@2x.png"
          alt="" srcset="">
      <span>反向選擇</span>
  </div>
<script setup>
let state = reactive({
		peopleList:[],//總數據
	    checkList: [],//選中數據數組
    	noCheckList:[],//未選中數據數組
})
// 重要 獲取選中未選中數據
const handleSelectionChange = (val) => {
    console.log(val);
    state.checkList = val
    const notIncludedArray = state.peopleList.filter(item => !val.includes(item));
    state.noCheckList = notIncludedArray
    // console.log(notIncludedArray);
}
const multipleTableRef= ref() // 多選table
const invertSelection = (rows) => {
    // rows  需要選中的數據  直接傳進 state.noCheckList 即可
    multipleTableRef.value.clearSelection()  //需要先全部取消選中  再去選中剛剛未選中的數據即可
    if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}
</script>

到此這篇關于elementPuls 表格反選實現(xiàn)的文章就介紹到這了,更多相關elementPuls 表格反選內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vite.config.ts配置之自動導入element-puls方式

vue實現(xiàn)多條件篩選超簡潔代碼
這篇文章主要給大家介紹了關于vue實現(xiàn)多條件篩選的相關資料,隨著數據的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數據,需要的朋友可以參考下
2023-09-09
詳解vue computed的緩存實現(xiàn)原理
這篇文章主要介紹了vue computed的緩存實現(xiàn)原理，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下
2021-04-04
解決v-if 與 v-for 同時使用報錯的問題
在進行項目開發(fā)的時候因為在一個標簽上同時使用了v-for和v-if兩個指令導致的報錯，遇到這個問題如何解決呢？下面小編給大家?guī)砹岁P于v-if 與 v-for 使用報錯問題分析及解決方法，一起看看吧
2022-03-03
Vue.js中$refs{}如何獲取DOM元素
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解如何使用Object.defineProperty實現(xiàn)簡易的vue功能
這篇文章主要為大家介紹了如何使用Object.defineProperty實現(xiàn)簡易的vue功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
Vue.js框架實現(xiàn)購物車功能
這篇文章主要為大家詳細介紹了Vue.js框架實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue使用正則校驗文本框為正整數
這篇文章主要介紹了Vue使用正則校驗文本框為正整數問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue 根據選擇條件顯示指定參數的例子
今天小編就為大家分享一篇vue 根據選擇條件顯示指定參數的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue如何實現(xiàn)el-table多選樣式變?yōu)閱芜x效果
這篇文章主要介紹了Vue如何實現(xiàn)el-table多選樣式變?yōu)閱芜x效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
NUXT SSR初級入門筆記(小結)
這篇文章主要介紹了NUXT SSR初級入門筆記(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12