导言
el-talble selection 行（选择列）用于显示复选框，让用户可以选择或取消选择某些表格行，常用于批量操作场景。
刚刚试了下，想加深印象记录一下当学习碎片。参考的是表格多选并根据每行值初始化选中状态（el-table-column type="selection"）_el-table-column selection-CSDN博客
正常使用：
<el-table v-loading="loading" ref="IsProjectMenber" :data="userList"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
</el-table>
主要是selection行，其中type要为selection，和实现用户勾选/取消勾选时的操作方法 @selection-change="handleSelectionChange"
handleSelectionChange
// 多选框选中数据
handleSelectionChange(selection) {
this.addMenberIds = selection.map(item => item.userID)
this.single = selection.length != 1
this.multiple = !selection.length
},
默认勾选实现
我是在对话框里套el-table的，和正常实现有些区别。如果是正常使用的话可去看看导言中我参考的文章
逻辑：
在 el-table 渲染完成后 ，自动勾选 userList 中 IsProjectMenber 为 true 的行
el-table v-loading="loading" ref="IsProjectMenber" :data="userList"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
...
el-table 加上 ref="IsProjectMenber"
ref 属性可以为该表格组件或其内部的某个元素提供一个引用，从而在 Vue.js 中更方便地访问和操作它。
在渲染完成的地方访问ref设置其中的一些值
我是在表格拿到数据后再打开对话框的，这样是确保在访问ref时list的数据已经加上去了。
<!-- 添加项目成员对话框 -->
<el-dialog :visible.sync="menberAddOpen" @opened="dialogOpened" title="添加项目成员" width="1000px" style="height: 900px"
append-to-body>
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="8" :xs="24">
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
style="margin-bottom: 20px" />
</div>
<div class="head-container">
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
:filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
@node-click="handleNodeClick" />
</div>
</el-col>
<!--用户数据-->
<el-col :span="16" :xs="24">
<el-table v-loading="loading" ref="IsProjectMenber" :data="userList"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户编号" align="center" key="userID" prop="userID" />
<el-table-column label="用户名称" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="deptName" :show-overflow-tooltip="true" />
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.PageIndex"
:limit.sync="queryParams.pageSize" @pagination="getUserList" />
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addMenber">添 加</el-button>
<el-button @click="addMenbercancel">取 消</el-button>
</div>
</el-dialog>
拿表格数据方法
getUserList() {
// 只查已启用的用户
this.queryParams.status = "0";
this.queryParams.ProjectId = this.projectId;
QueryUserPagesByProjectId(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.data.dataSource;
this.total = response.data.totalCount;
//绑好数据后再开对话框
this.menberAddOpen = true;
});
},
对话框打开后执行的方法，确保在 el-dialog 完全加载后再进行行的勾选操作
dialogOpened() {
// 在对话框完全打开后执行勾选操作
for (let i = 0; i < this.userList.length; i++) {
console.log("isProjectMenber11111",this.userList[i].isProjectMenber);
if (this.userList[i].isProjectMenber) {
this.$refs.IsProjectMenber.toggleRowSelection(this.userList[i]);
}
}
},
toggleRowSelection 是 Element UI 中 el-table 组件提供的一个方法，用于切换选定行的选择状态。它可以用于动态选择或取消选择特定行，通常在处理表格中的数据时非常有用。
数据中的勾选判断字段
表格绑定的字段中需要有添加默认勾选时的判断字段
