使用ElementUI设置一个表格,该表格第一个字段为多选框,第二个字段为图像,第三个字段为文字链接,第四个字段为按钮
时间: 2023-12-10 22:40:26 浏览: 27
可以使用 ElementUI 中的 `el-table` 组件来实现这个表格,具体代码如下:
```html
<el-table :data="tableData">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="image">
<template slot-scope="scope">
<img :src="scope.row.image" alt="" style="width: 50px; height: 50px;">
</template>
</el-table-column>
<el-table-column prop="text">
<template slot-scope="scope">
<a :href="scope.row.link">{{ scope.row.text }}</a>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleButtonClick(scope.$index)">按钮</el-button>
</template>
</el-table-column>
</el-table>
```
其中,`tableData` 是表格的数据源,包含了每一行的四个字段,即 `image`、`text`、`link` 和按钮。第一列使用了 `type="selection"` 来显示多选框,第二列使用了 `prop="image"` 来显示图片,第三列使用了 `prop="text"` 来显示文字链接,第四列直接写了一个按钮,使用了 `scope.$index` 来获取当前行的索引,从而实现点击按钮时能够获取到该行的数据。