quasar多选table组件如何实现选中数据才可编辑否则禁用

要实现在多选 Table 组件中，只有选中数据才能编辑，否则禁用，可以通过监听 `@selection` 事件，在事件回调函数中判断是否有选中的数据，根据情况来控制编辑状态。示例代码如下：

<template>
  <q-table
    :data="tableData"
    :columns="tableColumns"
    selection="multiple"
    :selected.sync="selectedRows"
    @selection="onSelectionChange"
  >
    <template #body-cell-edit="props">
      <q-input
        v-if="props.row.selected"
        v-model="props.model"
        dense
        type="text"
        :disable="!props.row.selected"
      />
      <q-input
        v-else
        v-model="props.model"
        dense
        type="text"
        :disable="!props.row.selected"
      />
    </template>
  </q-table>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tableData = ref([
      { name: '张三', age: 20, selected: false },
      { name: '李四', age: 30, selected: false },
      { name: '王五', age: 40, selected: false },
    ])

    const tableColumns = [
      { name: 'name', required: true, label: '姓名', align: 'left', field: row => row.name },
      { name: 'age', required: true, label: '年龄', align: 'left', field: row => row.age },
    ]

    const selectedRows = ref([])

    function onSelectionChange(selected) {
      // 判断是否有选中的数据
      const hasSelection = selected.length > 0

      // 遍历所有数据，设置是否可编辑
      tableData.value = tableData.value.map(row => {
        row.selected = selected.includes(row)
        return row
      })

      // 如果没有选中数据，清空选中的数据
      if (!hasSelection) {
        selectedRows.value = []
      }
    }

    return {
      tableData,
      tableColumns,
      selectedRows,
      onSelectionChange,
    }
  },
}
</script>

上述代码中，我们在 Table 组件中使用 `selection="multiple"` 启用多选功能，并通过 `:selected.sync="selectedRows"` 实现选中数据的双向绑定。在编辑模板中，我们通过 `v-if="props.row.selected"` 判断是否有选中的数据，如果有则显示输入框并设置为可编辑状态，否则隐藏输入框并设置为不可编辑状态。在 `onSelectionChange` 方法中，我们通过遍历所有数据，设置是否选中和是否可编辑的状态，根据选中的数据来控制编辑状态。