el-table中使用el-select
时间: 2023-10-13 12:59:35 浏览: 115
您可以在el-table的列定义中使用el-select。下面是一个示例:
```
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<el-select v-model="scope.row.status" placeholder="请选择">
<el-option label="启用" value="enabled"></el-option>
<el-option label="禁用" value="disabled"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '选项1', status: 'enabled' },
{ name: '选项2', status: 'disabled' },
{ name: '选项3', status: 'enabled' }
]
};
}
};
</script>
```
在上面的示例中,我们在el-table-column的模板中使用了el-select组件。通过v-model指令,可以将所选的值绑定到tableData中每一行的status属性上。在el-select的option中定义了两个选项,通过label和value属性进行标识。
请注意,这只是一个简单的示例,您可以根据实际需求进行更复杂的配置。
阅读全文