eltable动态固定某一列

如果你想要设置 el-table 组件中某一行作为一个整体，而不是每一列作为一个元素，可以使用 `slot-scope` 属性结合 `template` 标签来自定义行的内容。你可以在模板中使用 `el-table-column` 组件来定义每一列的内容，然后将它们放在一个 `template` 标签中，这样这一行的所有列就会被包裹在一个容器中，从而实现将整行作为一个整体的效果。 以下是一个示例代码： ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <template slot-scope="scope" slot="row"> <div class="custom-row"> <el-table-column :label="$t('table.customLabel')"> <span>{{ scope.row.custom }}</span> </el-table-column> </div> </template> </el-table> ``` 在这个示例中，我们使用了 `slot-scope` 属性来访问每一行的数据，并使用 `template` 标签来自定义行的内容。在自定义的行内容中，我们使用了 `el-table-column` 组件来定义了一列的内容，然后将它放在了一个 `div` 容器中。这个 `div` 容器就是我们要用来包裹整行的元素。最后，我们将这个 `template` 标签的 `slot` 属性设置为 `row`，表示这个模板是用来自定义行的。在 CSS 样式中，你可以通过 `.custom-row` 类名来设置这个容器的样式，从而实现将整行作为一个整体的效果。

### 实现 `el-table` 默认选中指定行 为了实现在 `el-table` 中默认选中特定行的功能，可以通过设置表格的 `row-key` 属性以及利用 Vue 的响应式特性来管理已选项的状态。具体来说： 当初始化表格时，通过调用 `tableRef.value.toggleRowSelection(row, selected)` 方法可以手动控制某一行是否被选中[^1]。 下面是一个完整的实现方案，展示了如何在对话框打开时自动选中某些行： #### HTML 部分 ```html <template> <div> <!-- 对话框 --> <el-dialog :visible.sync="dialogVisible"> <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" row-key="id" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="kernelEmployeeName" header-align="center" align="center" label="主要维护人"/> <!-- 更多列定义 --> </el-table> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="confirmSelection()">确 定</el-button> </span> </el-dialog> <el-button @click="openDialog()">打开对话框并加载数据</el-button> </div> </template> ``` #### JavaScript (Vue 组件逻辑) ```javascript <script setup> import { ref, onMounted } from "vue"; const dialogVisible = ref(false); const tableData = ref([]); const multipleTable = ref(null); // 假设这是从服务器获取的数据列表 function fetchData() { return [ {"id": 1, "name": "张三", "kernelEmployeeName": "李四"}, {"id": 2, "name": "王五", "kernelEmployeeName": "赵六"} ]; } async function openDialog() { const data = await fetchData(); // 设置表单数据源 tableData.value = data; nextTick(() => { // 初始化时，默认勾选部分项 toggleDefaultSelectedRows(data.filter(item => item.id === 1)); }); dialogVisible.value = true; } function handleSelectionChange(selection) { console.log('当前选择:', selection); } function confirmSelection() { let selectedItems = multipleTable.value.selection; console.log(selectedItems); // 处理确认后的操作 dialogVisible.value = false; } function toggleDefaultSelectedRows(rows) { rows.forEach((row) => { setTimeout(() => { multipleTable.value?.toggleRowSelection(row, true); }, 100); }); } </script> ``` 在这个例子中，每当点击按钮触发 `openDialog()` 函数时，都会重新拉取最新数据填充到表格里，并尝试将符合条件的第一条记录作为默认选中的项目。注意这里使用了 `setTimeout` 来延迟执行 `toggleRowSelection` 调用来确保 DOM 已经更新完毕后再去修改其状态[^3]。