vue2 中获取子组件中的数据方法,可以使用 this.$refs ,但此方式在vue3中不适用了。

在这里插入图片描述
问题: 点击删除行的同时修改表格中数据选中状态,需要通过 ref 操作表格中的数据。 具体代码如下:

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    :show-header="false"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="address" label="Address" show-overflow-tooltip />
  </el-table>
  <ul>
    <li v-for="(item, index) in multipleSelection" :key="item.id">
        {{item.address}}
        <i @click="del(index)">删除</i>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const del = (index) => {
  const a = multipleSelection.value[index]
  multipleSelection.value.splice(index, 1)
  // 通过 ref 操作table中的数据
  multipleTableRef.value.toggleRowSelection(a, false)
}

const tableData = [
  {
    id: 1,
    address: '数据1'
  },
  {
    id: 2,
    address: '数据2'
  },
  {
    id: 3,
    address: '数据3'
  },
  {
    id: 4,
    address: '数据4'
  },
  {
    id: 5,
    address: '数据5'
  }
]
</script>
Logo

前往低代码交流专区

更多推荐