vue表格中的format格式化出按钮

在 Vue 表格中，可以通过自定义列的方式，来实现格式化出按钮的效果。具体实现步骤如下：

1. 在 Vue 表格的列定义中，添加自定义列，用于渲染按钮：

columns: [
  // 其他列
  {
    label: '操作',
    width: 100,
    fixed: 'right',
    formatter: (row, column, cellValue, index) => {
      return `<el-button size="small" @click="handleClick(${index})">编辑</el-button>`
    }
  }
]

在上面的代码中，我们定义了一个名为“操作”的列，宽度为 100，固定在右侧。其中，formatter 函数用于渲染单元格的内容，返回一个包含按钮的 HTML 字符串。在这里，我们使用了 Element UI 的按钮组件 `<el-button>`，并绑定了一个点击事件 `@click`，调用 `handleClick` 函数，传递行索引 `index`。

2. 在 Vue 组件中，定义 `handleClick` 函数，用于处理按钮点击事件：

methods: {
  handleClick(index) {
    // 处理按钮点击事件，例如弹出编辑框等
    console.log('点击了第', index, '行的编辑按钮')
  }
}

在上面的代码中，我们定义了一个名为 `handleClick` 的函数，用于处理按钮的点击事件。在这里，我们只是简单地输出一条日志，实际应用中需要根据具体需求进行处理。

上述代码中的操作列会在表格的每一行中渲染出一个“编辑”按钮，点击按钮会触发 `handleClick` 函数，传递当前行的索引，以方便进行后续的处理。需要注意的是，这里使用了字符串模板来生成 HTML，因此需要注意转义字符的处理，避免 XSS 攻击等安全问题。另外，在实际应用中，还需要考虑不同浏览器、不同分辨率下的兼容性问题。