vue渲染第一行为三个场地，每一列为场地名称+48时段 并点击某列 某列变色，当不能点击别的列的数据

A：

你可以使用Vue的v-for指令来循环渲染场地和时间段。

在模板中定义表格结构：

<table>
  <tr>
    <th></th> <!-- 第一列表头 -->
    <th v-for="time in times">{{ time }}</th> <!-- 时间段表头 -->
  </tr>
  <tr v-for="(field, index) in fields">
    <td>{{ field }}</td> <!-- 场地名称 -->
    <td v-for="(time, i) in times" :class="{ 'active': activeCol === i }" @click="handleClick(index, i)"></td> <!-- 时间段单元格 -->
  </tr>
</table>

在Vue组件中定义数据和方法：

data() {
  return {
    fields: ['场地A', '场地B', '场地C'], // 场地列表
    times: [...Array(48).keys()], // 时间段列表
    activeCol: null // 当前选中时间段的列索引
  }
},
methods: {
  handleClick(fieldIndex, colIndex) {
    if (this.activeCol === null) {
      this.activeCol = colIndex; // 第一次选中，记录选中列
    } else if (this.activeCol === colIndex) {
      this.activeCol = null; // 再次点击选中列，取消选择
    }
    // 其他情况不做处理，因为选中列不能覆盖已选中的列
  }
}

为选中的列单元格添加.active类，以改变其背景颜色。isActiveCol为null时，表示未选中任何列，也可以用一个变量记录是否有选中的列，而不是直接记录选中的列索引。