el-table中有两列prop相同,使用el-switch让它只作用于其中一列
时间: 2024-01-07 17:02:35 浏览: 70
如果在 `el-table` 中有两列的 `prop` 相同,而你只想让 `el-switch` 组件作用于其中一列,可以使用 `slot-scope` 来获取当前列的 `prop` 值,然后根据需要决定是否渲染 `el-switch` 组件。下面是一个示例代码:
```
<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"></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 }
]
}
}
}
</script>
```
在这个例子中,我们在第二列和第三列中都使用了 `status` 作为 `prop` 值,但是只有第二列中的 `el-switch` 组件会作用于 `status` 属性。在 `el-table-column` 的模板中,我们使用 `scope.column.property` 来获取当前列的 `prop` 值,然后判断是否和目标列的 `prop` 值相同。如果相同,并且当前行的 `status` 属性不为 `undefined`,则渲染 `el-switch` 组件,否则渲染普通文本。这样,你就可以根据需要选择性地在某一列中使用 `el-switch` 组件了。
阅读全文