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

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>

你可能感兴趣的:(前端,elementui,vue.js)