el-table插入el-select
时间: 2023-10-02 09:06:17 浏览: 292
您可以使用`el-table`组件的插槽来插入`el-select`组件。以下是一个示例代码:
```html
<template>
<div>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别">
<template slot-scope="scope">
<el-select v-model="scope.row.gender">
<el-option label="男" value="male"></el-option>
<el-option label="女" value="female"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: 'male' },
{ name: '李四', age: 25, gender: 'female' },
{ name: '王五', age: 30, gender: 'male' }
]
};
}
};
</script>
```
在上面的示例中,我们使用`el-table`的`<el-table-column>`标签来定义表格列。在“性别”列中,我们使用插槽(`slot-scope="scope"`)来自定义单元格内容,并在插槽中嵌入了`el-select`组件。通过`v-model="scope.row.gender"`将选择的值绑定到表格数据中的`gender`属性。
您可以根据自己的需求修改上述代码,以满足您的实际情况。希望对您有所帮助!
阅读全文