Vue+ElementUI 弹窗的表格中(第一列是选择框),在修改弹窗时,需要回显并勾选中在新增时已选择的表格数据。
在Vue中使用ElementUI时,如果需要在编辑弹窗中回显并勾选表格的第一列的选择框,可以通过双向绑定数据和使用v-model
来实现。以下是一个简化的例子:
<template>
<el-dialog title="编辑" :visible.sync="dialogVisible">
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked"> </el-checkbox>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false, // 控制弹窗显示隐藏
tableData: [
{ id: 1, checked: false },
{ id: 2, checked: false },
// 更多数据...
],
};
},
methods: {
// 显示编辑弹窗,并回显数据
showEditDialog() {
this.dialogVisible = true;
// 假设需要回显的数据
const selectedIds = [1, 2]; // 例如这里是从服务器获取到的已选中项id数组
this.tableData.forEach(item => {
item.checked = selectedIds.includes(item.id);
});
},
},
};
</script>
在这个例子中,dialogVisible
控制弹窗的显示与隐藏。tableData
中的每个对象都有一个checked
属性,它与一个el-checkbox
组件通过v-model
双向绑定。当你需要显示编辑弹窗时,你可以调用showEditDialog
方法,它会遍历tableData
,将对应id
在selectedIds
数组中的项的checked
属性设置为true
,从而勾选对应的选择框。
评论已关闭