代码实例:
<el-dialog
v-model="data.dialogVisible"
width="800px"
:show-close="false"
:before-close="handleClose"
:modal="false"
destroy-on-close
>
<template #header="{close}">
<div class="my-header">
<div class="my-header-name">添加分类</div>
<el-icon style="cursor: pointer" @click="close">
<Close/>
</el-icon>
</div>
</template>
<div class="dialog-content">
<div class="search-box" style="margin-top:5px">
<el-select @change="searchHandle()" clearable v-model="data.searchInfo.course_classify_id" class="mr-20"
placeholder="请选择课程分类">
<el-option
v-for="item in data.courseClassifyList"
:key="item.id.toString()"
:label="item.name"
:value="item.id.toString()"
/>
</el-select>
<el-input
style="width:216px;"
v-model="data.searchInfo.name"
class="mr-20"
placeholder="课程名称"
>
<template #suffix>
<el-icon class="el-input__icon">
<component :is="Search" @click="searchHandle()"></component>
</el-icon>
</template>
</el-input>
</div>
<el-table ref="multipleTableRef" :row-key="(row)=>{return row.id.toString()}" @selection-change="handleSelectionChange" :row-style="{height:'50px'}"
:data="data.list"
style="width: 100%;margin-top:20px">
<el-table-column type="selection" width="100"/>
<el-table-column prop="course_classify.name" label="所属分类"/>
<el-table-column prop="name" label="课程名称"/>
<el-table-column label="价格(元)">
<template v-slot="scope">
¥{{ scope.row.price }}
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination v-model:currentPage="data.searchInfo.page"
v-model:page-size="data.searchInfo.limit"
background
layout="prev, pager, next,jumper"
:total="Number(data.searchInfo.total)"
@current-change="handleCurrentChange"/>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" style="width:83px;" @click="addCourse()"
>确定</el-button
>
<el-button style="width:83px;" @click="handleClose">取消</el-button>
</span>
</template>
</el-dialog>
因为是dialog,普通的v-model="data.dialogVisible"只是去控制显隐并不会重新渲染,所以我们用到dialog的destroy-on-close属性,让弹窗去销毁渲染
const multipleTableRef = ref(null)
function chooseCourse() {
data.dialogVisible = true;
data.multipleSelection = data.selectedCourseList
nextTick(()=>{
data.multipleSelection.forEach((item)=>{
multipleTableRef.value.toggleRowSelection(item,true)
})
})
}
注意,先重新加载dialog,然后进行选中操作