在 <el-table-column label="姓名" prop="stuName" >标签中,怎么让里面包含一个a标签,并且该a标签显示的文本是prop的文本
时间: 2024-05-16 11:15:25 浏览: 94
react-native-label:React将标签应用于React Native中的任何内容
可以在`<el-table-column>`标签中使用`scoped-slot`来自定义每一列的内容,具体实现如下:
```html
<el-table-column label="姓名" prop="stuName">
<template slot-scope="scope">
<a :href="'/students/' + scope.row.id">{{ scope.row.stuName }}</a>
</template>
</el-table-column>
```
在这个例子中,我们在`<template>`标签中使用了`slot-scope="scope"`,这个属性告诉Vue要将这个`<template>`标签作为一个插槽来使用,并且这个插槽可以访问到父组件中的数据。`scope`就是父组件中传递给子组件的数据,它包含了当前行的所有数据。
然后我们使用了一个`<a>`标签来显示`stuName`的文本,并且设置了该标签的`href`属性,使得点击该标签时可以跳转到对应的学生详情页。注意在这里我们使用了`:href`来绑定`href`属性,这是因为我们需要在`href`属性中动态地拼接学生的id。
最后将这个`<template>`标签放在`<el-table-column>`标签中,就可以实现在表格中显示一个带有链接的姓名了。
阅读全文