el-table中有两列prop相同,使用el-switch让它在做切换时只作用于其中一列
时间: 2024-03-05 21:50:15 浏览: 70

el-tabs切换组件如何实现
如果在 `el-table` 中有两列的 `prop` 值相同,而你只想让 `el-switch` 组件在切换时作用于其中一列,可以使用 `slot-scope` 来获取当前列的 `prop` 值,然后根据需要决定是否渲染 `el-switch` 组件。同时,你需要在 `el-switch` 组件的 `change` 事件中,判断当前列的 `prop` 值是否和目标列相同,如果相同,则更新当前行对应的数据。下面是一个示例代码:
```
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="status" label="Status">
<template slot-scope="scope">
<template v-if="scope.column.property === 'status' && scope.row.status !== undefined">
<el-switch v-model="scope.row.status" @change="handleChange(scope.row, 'status')"></el-switch>
</template>
<template v-else>
{{ scope.row.status }}
</template>
</template>
</el-table-column>
<el-table-column prop="status" label="Other Status"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', status: true },
{ name: 'Mike', status: false },
{ name: 'Amy', status: true }
]
}
},
methods: {
handleChange(row, prop) {
if (prop === 'status') {
row['status'] = !row['status'];
}
}
}
}
</script>
```
在这个例子中,我们在第二列和第三列中都使用了 `status` 作为 `prop` 值,但是只有第二列中的 `el-switch` 组件在切换时会作用于 `status` 属性。在 `el-switch` 组件的 `change` 事件中,我们首先判断当前列的 `prop` 值是否和目标列相同,如果相同,则更新当前行对应的数据。这样,你就可以根据需要选择性地在某一列中使用 `el-switch` 组件,并且只在目标列中进行数据更新了。
阅读全文
相关推荐

















