VUE控制单选框在一行内展示

可以通过使用VUE的v-for指令和v-bind指令来实现单选框在一行内展示。首先，将单选框的选项存储在一个数组中，然后使用v-for指令在HTML模板中遍历该数组，并使用v-bind指令将每个单选框的值绑定到相应的数组元素上。

例如，以下代码可以实现在一行内展示四个单选框：

<template>
  <div>
    <label v-for="(option, index) in options" :key="index">
      <input type="radio" :value="option" v-model="selectedOption">{{ option }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
      selectedOption: ''
    }
  }
}
</script>

这段代码将四个选项存储在options数组中，然后使用v-for指令在HTML模板中遍历该数组，并将每个单选框的值绑定到相应的数组元素上。通过v-model指令将单选框和选中的选项绑定到selectedOption变量上，最终实现在一行内展示四个单选框的效果。

相关问题

ag-grid-vue 获取单选框状态

在 ag-grid-vue 中，你可以使用自定义组件来渲染单选框。首先，你需要在页面的 mounted 钩子函数中，调用 ag-grid 的 api 来注册这个自定义组件：

mounted() {
  this.gridApi.addCellRenderer('myRenderer', this.myRenderer);
}

然后，你可以在 methods 中定义一个函数来渲染单选框，这个函数需要返回一个 Vue 组件：

methods: {
  myRenderer(params) {
    return {
      template: `
        <input type="checkbox" v-model="checked" @change="onChange"/>
      `,
      data() {
        return {
          checked: params.value === 'Y',
        }
      },
      methods: {
        onChange() {
          params.data[params.colDef.field] = this.checked ? 'Y' : 'N';
        },
      },
    };
  },
}

在你的组件中，你可以通过调用 gridApi.getSelectedRows() 来获取所有被选中的行，然后遍历这些行，获取每一行中单选框的状态。

const selectedRows = this.gridApi.getSelectedRows();
selectedRows.forEach(row => {
  console.log(row.myField);  // 这里的 myField 就是单选框所在的列
});

希望这能帮到你。

ag-grid-vue添加单选框并捕捉单选框点击事件

要在 ag-grid-vue 中添加单选框并捕获单选框点击事件，可以按照以下步骤进行操作：

1. 在列定义中添加一个名为`checkboxSelection`的列，以显示单选框。例如：

{
  headerName: "Select",
  checkboxSelection: true,
  width: 80,
  suppressMenu: true
}

2. 在`gridOptions`中设置`rowSelection`属性为`single`，以确保只能选择一个行。例如：

gridOptions: {
  rowSelection: 'single'
}

3. 在`gridReady`事件处理程序中，将选中行更改事件添加到`gridApi`对象中。例如：

onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;

  this.gridApi.addEventListener('rowSelected', this.onRowSelected.bind(this));
},

onRowSelected(event) {
  // 处理选中行更改事件
}

4. 在`onRowSelected`事件处理程序中，可以通过`event.data`属性访问选中的行数据。例如：

onRowSelected(event) {
  const selectedRowData = event.data;
  // 处理选中行数据
}

5. 如果要在单击单选框时触发事件，可以使用`cellClicked`事件处理程序。例如：

onCellClicked(event) {
  if (event.colDef.checkboxSelection) {
    // 处理单选框点击事件
  }
}

完整示例代码如下：

<template>
  <div style="height: 500px" class="ag-theme-alpine">
    <ag-grid-vue
      :columnDefs="columnDefs"
      :rowData="rowData"
      :gridOptions="gridOptions"
      @gridReady="onGridReady"
      @cellClicked="onCellClicked"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: {
    AgGridVue,
  },
  data() {
    return {
      gridApi: null,
      gridColumnApi: null,
      columnDefs: [
        {
          headerName: 'Select',
          checkboxSelection: true,
          width: 80,
          suppressMenu: true,
        },
        { field: 'make' },
        { field: 'model' },
        { field: 'price' },
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 },
      ],
      gridOptions: {
        rowSelection: 'single',
      },
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;

      this.gridApi.addEventListener('rowSelected', this.onRowSelected.bind(this));
    },
    onRowSelected(event) {
      const selectedRowData = event.data;
      console.log(selectedRowData);
    },
    onCellClicked(event) {
      if (event.colDef.checkboxSelection) {
        console.log('Checkbox clicked');
      }
    },
  },
};
</script>