el-table循环内有插槽
在Vue中使用Element UI的<el-table>
组件时,如果需要在循环内使用插槽,可以通过template
标签结合v-for
来实现。以下是一个简单的例子:
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<!-- 这里是插槽 -->
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button size="small" @click="handleClick(scope.row)">查看</el-button>
<!-- 这里可以根据需要插入更多的按钮或内容 -->
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', ... },
// ... 更多数据
]
};
},
methods: {
handleClick(row) {
console.log(row);
}
}
};
</script>
在这个例子中,<el-table>
组件的:data
属性绑定了一个数组tableData
,该数组中的每个对象都会被循环渲染成一行表格。<el-table-column>
组件用于定义表格的列,其中包含了两个固定列和一个操作列,操作列使用了作用域插槽scope
来动态渲染每行的操作按钮。
评论已关闭