DOC_UNSIGNED是columns里的一列,我想在这一列的所有单元格里加上按钮,可以通过v-slot:body-cell-DOC_UNSIGNED="props"去设置按钮吗
时间: 2024-03-18 17:40:18 浏览: 187
是的,你可以使用 `v-slot:body-cell` 来自定义表格单元格的显示方式,具体来说,你可以在 `v-slot:body-cell` 中使用 Vue 组件或者 HTML 元素来渲染单元格内容。在你的情况下,你可以这样做:
``` html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="DOC_UNSIGNED" label="未签收文档">
<template v-slot:body-cell="props">
<el-button type="primary" @click="handleClick(props.row)">按钮</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ DOC_UNSIGNED: '文档1' },
{ DOC_UNSIGNED: '文档2' },
{ DOC_UNSIGNED: '文档3' }
]
};
},
methods: {
handleClick(row) {
console.log(row.DOC_UNSIGNED);
}
}
};
</script>
```
在上面的代码中,我们使用 `v-slot:body-cell` 来自定义表格单元格的显示方式,将一个 `el-button` 组件嵌套在 `template` 标签中。同时,我们在 `el-button` 组件上绑定了一个 `@click` 事件,来处理按钮点击操作。在 `@click` 事件处理函数中,我们可以通过 `props.row` 访问到当前单元格所在的行数据,从而获取到 `DOC_UNSIGNED` 字段的值。
阅读全文