vue3+element-plus 表格默认选中数据

最新推荐文章于 2024-10-12 14:04:37 发布

zxna

最新推荐文章于 2024-10-12 14:04:37 发布

阅读量3.4k

点赞数

文章标签：前端 elementui vue.js

本文链接：https://blog.csdn.net/qq_32555123/article/details/126421755

版权

本文探讨了一位开发者在使用Element Plus的el-table组件进行多选时，遇到的问题：在本地环境中正常工作，但在部署后出现错误。文章详细展示了代码片段，着重于解决前后端环境差异导致的交互问题。

摘要由CSDN通过智能技术生成

html:

<template>
       <el-table ref="multipleTableRef" row-key="id" height="500" :header-cell-style="{ background: '#F5F6FA' }" :cell-style="{ padding: '2px' }" :row-style="{ height: '36px' }" v-loading="state.loading" :data="searchstate.list" border >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="字段名" prop="chinaFieldName" />
            </el-table>
</template>

js：

<script lang="ts" setup>
import { ref, nextTick } from 'vue';   
import {  ElTable } from 'element-plus';
const searchstate = reactive({
  list: [{id:1,chinaFieldName:"333"},{id:1,chinaFieldName:"333"}],
  editableTabs: [{id:1,chinaFieldName:"333"}],
});
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 searchstate.editableTabs.forEach((row) => {
      nextTick(() => {
        multipleTableRef.value!.toggleRowSelection(row, undefined);
      });
    });
</script>

以下方法本地正常，部署后会报错，不可行！！

<script lang="ts" setup>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  onMounted,
  nextTick,
  getCurrentInstance,
  defineEmits,
} from 'vue';
const multipleSelection = ref([])
const instance = getCurrentInstance();
 var ultipleTabInstance = toRefs(instance.refs.multipleTableRef);

    searchstate.editableTabs.forEach((row) => {
      nextTick(() => {
      ultipleTabInstance.toggleRowSelection.value(row, true);
      });
    });

  </script>