用element Ui写一个带单选按钮的table
时间: 2024-05-11 21:14:17 浏览: 13
以下是使用Element UI编写带有单选按钮的表格的示例代码:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Winterfell'
}
]
}
}
}
</script>
```
在上面的示例中,我们使用了`el-table-column`组件来创建表格列,并使用`prop`属性来指定表格数据中对应的字段。在第一列中使用了`type="selection"`来创建单选按钮。选中行时,`el-table`组件会触发`@selection-change`事件,我们可以在此事件中获取选中的行数据。
```html
<el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
```
```js
export default {
data() {
return {
tableData: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Winterfell'
}
]
}
},
methods: {
handleSelectionChange(selection) {
console.log(selection)
}
}
}
```