vxe-table把操作列合并
您可以使用scopedSlots属性来自定义操作列的内容和样式,然后将其合并为一个单元格。
以下是一个例子:
<template>
<vxe-table :data="tableData">
<vxe-column type="index" width="50"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
<vxe-column title="Operation" :width="100" :align="'center'" :fixed="'right'">
<template #scopedSlots="{ row }">
<div>
<el-button type="primary" size="mini" @click="edit(row)">Edit</el-button>
<el-button type="danger" size="mini" @click="del(row)">Delete</el-button>
</div>
</template>
</vxe-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 28 },
{ name: 'Mary', age: 25 },
{ name: 'Bob', age: 30 }
]
};
},
methods: {
edit(row) {
console.log('Edit:', row.name);
},
del(row) {
console.log('Delete:', row.name);
}
}
};
</script>
在上面的代码中,我们使用了scopedSlots属性来自定义操作列的内容,其中row参数表示当前行的数据对象。我们将两个按钮放在一个<div>元素中,然后将其返回给模板。通过将Operation列的width属性设置为100,我们使该列的宽度保持一致,并使用align和fixed属性来使其居中和固定在表格的右侧。
在这个示例中,我们并没有将编辑和删除按钮合并成一个单元格,但是您可以通过在<div>元素中使用HTML和CSS来自定义它们的样式,从而将它们合并成一个单元格
原文地址: https://www.cveoy.top/t/topic/fHRR 著作权归作者所有。请勿转载和采集!