vue + bjui 写一个可双击编辑的表格

好的，下面是一个简单的示例代码，可以实现在Vue和BJUI框架下实现可双击编辑的表格：

<table id="editableTable" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in dataList" :key="index" @dblclick="editRow(index)">
      <td v-if="editIndex !== index">{{ item.name }}</td>
      <td v-else><input class="form-control" v-model="item.name"></td>
      <td v-if="editIndex !== index">{{ item.age }}</td>
      <td v-else><input class="form-control" v-model.number="item.age"></td>
      <td v-if="editIndex !== index">{{ item.gender }}</td>
      <td v-else>
        <select class="form-control" v-model="item.gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

new Vue({
  el: '#app',
  data: {
    dataList: [
      { name: '张三', age: 20, gender: '男' },
      { name: '李四', age: 25, gender: '女' },
      { name: '王五', age: 30, gender: '男' }
    ],
    editIndex: -1
  },
  methods: {
    editRow(index) {
      this.editIndex = index;
    }
  }
});

在上面的代码中，我们使用了Vue的双向绑定语法v-model来绑定表格中的可编辑字段，使用了BJUI框架的样式和表格组件。在Vue的methods中定义了一个editRow方法，用于在双击表格行时设置当前编辑行的索引，从而实现表格的编辑功能。