如何在buefy中添加b-table列？

<template>
  <div>
    <b-table :data="tableData">
      <template slot-scope="props">
        <b-table-column label="姓名" field="name"></b-table-column>
        <b-table-column label="年龄" field="age"></b-table-column>
        <b-table-column label="性别" field="gender"></b-table-column>
        <b-table-column label="操作">
          <template slot-scope="props">
            <button @click="editRow(props.row)">编辑</button>
            <button @click="deleteRow(props.row)">删除</button>
          </template>
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' }
      ]
    };
  },
  methods: {
    editRow(row) {
      // 编辑行的逻辑
    },
    deleteRow(row) {
      // 删除行的逻辑
    }
  }
};
</script>