您可以使用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,我们使该列的宽度保持一致,并使用alignfixed属性来使其居中和固定在表格的右侧。

在这个示例中,我们并没有将编辑和删除按钮合并成一个单元格,但是您可以通过在<div>元素中使用HTML和CSS来自定义它们的样式,从而将它们合并成一个单元格

vxe-table把操作列合并

原文地址: https://www.cveoy.top/t/topic/fHRR 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录