表格事件的使用

表格单选

<el-table stripe border  :data="tableData" height="750" @scroll="handleScroll"
            @selection-change="handleSelectionChange" style="overflow: auto;width: 100%;"   ref="refsTable"
            :header-cell-style="{ background: '#e5eeff' }">
            ...
</el-table>
const refsTable=ref()
// 单选框事件
const handleSelectionChange = (val: any) => {
      if (val.length > 1) {
      //移除上一次选中行数据
        val.shift();
        //修改选中图标为未选中状态
        refsTable.value.clearSelection();
        //将当前选中行改为选中状态
        refsTable.value.toggleRowSelection(val[0]);
      }
    //可以在这赋值
    。。。
}

<el-table stripe border  :data="tableData" height="750" @scroll="handleScroll"
            @selection-change="handleSelectionChange" style="overflow: auto;width: 100%;"   ref="refsTable"
            :header-cell-style="{ background: '#e5eeff' }">
            ...
</el-table>
const refsTable=ref()
// 单选框事件
const handleSelectionChange = (val: any) => {
      if (val.length > 1) {
      //移除上一次选中行数据
        val.shift();
        //修改选中图标为未选中状态
        refsTable.value.clearSelection();
        //将当前选中行改为选中状态
        refsTable.value.toggleRowSelection(val[0]);
      }
    //可以在这赋值
    。。。
}

指定选中某一条

<template>
  <div>
    <el-table ref="multipleTableRef" :data="state.tableData" style="width: 100%"
      @selection-change="handleSelectionChange">
       ...  
    </el-table>
  </div>
</template>

<script setup>
import { reactive, watch, ref, onMounted } from 'vue'
const multipleTableRef = ref()
 const  tableData=ref( [
    {
      remark: '张三22',
      status: 2,
    },
    {
      remark: '李四',
      status: 1,
    },
    {
      remark: '王五',
      status: 1,
    },
  ])
onMounted(() => {
  console.log(multipleTableRef.value);
  tableData.value.forEach(row => {
    if (row.status == 2) {
      multipleTableRef.value.toggleRowSelection(true)
    }
  })
})
</script>

<style lang="scss" scoped></style>

<template>
  <div>
    <el-table ref="multipleTableRef" :data="state.tableData" style="width: 100%"
      @selection-change="handleSelectionChange">
       ...  
    </el-table>
  </div>
</template>

<script setup>
import { reactive, watch, ref, onMounted } from 'vue'
const multipleTableRef = ref()
 const  tableData=ref( [
    {
      remark: '张三22',
      status: 2,
    },
    {
      remark: '李四',
      status: 1,
    },
    {
      remark: '王五',
      status: 1,
    },
  ])
onMounted(() => {
  console.log(multipleTableRef.value);
  tableData.value.forEach(row => {
    if (row.status == 2) {
      multipleTableRef.value.toggleRowSelection(true)
    }
  })
})
</script>

<style lang="scss" scoped></style>