vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式

更新時間：2024年07月25日 10:29:53 作者：蠟筆大杺

這篇文章主要介紹了vue3?element?plus?table?selection展示數(shù)據(jù),默認(rèn)選中功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 element plus table selection展示數(shù)據(jù),默認(rèn)選中

當(dāng)打開表格數(shù)據(jù)時，可能會根據(jù)后臺返回的數(shù)據(jù)，默認(rèn)選中符合條件的行

這樣我們就用到了el-table-column，設(shè) type 屬性為 selection

1.表格的第一行,設(shè)置為

 <el-table-column type="selection" width="25" />

2.table上定義ref屬性,并且定義這個變量

><script setup lang="ts">
const orgidslistRef = ref<InstanceType<typeof ElTable>>();
<script />

3.在事件中配置一下

  //遍歷表格的數(shù)據(jù)，再遍歷需要在表格中反顯的數(shù)據(jù)，兩者的id一致
  //創(chuàng)建一個空數(shù)組用來存放默認(rèn)數(shù)據(jù)
  //allprojectsortids指的是存放表格顯示數(shù)據(jù)的數(shù)組，和table綁定的data數(shù)據(jù)來源一致
  //item我這里是存放條件數(shù)組
  //假設(shè):item=[1,2,3],我們需要把a(bǔ)llprojectsortids數(shù)組中id在item中的行默認(rèn)選中,即可進(jìn)行 下面的操作,具體判斷操作自行修改.
  const listNew = [];//需要注意的是,這個數(shù)組中存放的數(shù)據(jù)要包含allprojectsortids數(shù)組中符合條件行全部的數(shù)據(jù),不能只存放id,直接把那一行的數(shù)據(jù)全部存里面.
async  function edititemcondition(){
 await orgidslistRef.value.clearSelection();//清空選中狀態(tài)
  allprojectsortids.value.forEach(it => {
    if (item.value.projectsortidslist_ext.indexOf(it.value) > -1) {
      // 把判斷出來的默認(rèn)表格數(shù)據(jù)push到創(chuàng)建的數(shù)組中
      listNew.push(it);
    }
  });


  //方法一 一定設(shè)置async  
  // await orgidslistRef.value.clearSelection();//清空選中狀態(tài)
   //使用for循環(huán)方法處理復(fù)雜字段 推薦使用
   //orgidslistRef.value定義的ref
   // allprojectsortids.value原表格數(shù)據(jù)
   // listNew選中的數(shù)據(jù)
   
  for (let i = 0, i <  listNew.length; i++) {
    orgidslistRef.value.toggleRowSelection(
      allprojectsortids.value.find(item => {
        return listNew[i].value === item.value; // 注意這里尋找的字段要唯一，示例僅參考
      }),
      true
    );
  }


  //方法二
  if (listNew.length > 0) {
    //再遍歷數(shù)組，將數(shù)據(jù)放入方法中
    listNew.forEach(row => {
      setTimeout(() => {
        orgidslistRef .value.toggleRowSelection(row, true);
      }, 0);
    });
  }  }

修改選中的行，重新賦值

function multipleOrgidslist_ext(val) {
//val選中行的數(shù)據(jù)
  console.log("%c搜索", "color:red;font-size:30px", val);
  if (val) {
    item.value.orgidslist_ext = [];
    const temp = [];
    for (let i = 0; i < val.length; i++) {
      temp.push(val[i].value);
    }
    item.value.projectsortidslist_ext= temp;
  }
}

//定義的數(shù)組
const allprojectsortids = ref(
[
  {
    date: '2016-05-03',
    id:1,
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
  id:2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:5,
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

]
)

結(jié)果：