vue3+element-plus 表格默认选中数据
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>
更多推荐
已为社区贡献5条内容
所有评论(0)