eltable单选获取数据

如果你想从一个表格中获取单选框的数据，可以使用以下代码：

var radioButtons = document.getElementsByName('myRadioButton');
var selectedValue;
for (var i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
    selectedValue = radioButtons[i].value;
    break;
  }
}

上述代码假设你的单选框的 name 属性为 'myRadioButton'，并且每个单选框都有一个 value 属性。在循环中，我们检查每个单选框是否被选中。如果被选中，我们将其值存储在 selectedValue 变量中并中断循环。最后，selectedValue 将包含所选单选框的值。

相关问题

eltable单选按钮

el-table中可以通过el-radio或者el-radio-group来实现单选按钮的功能。

1. 使用el-radio实现单选按钮：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="gender" label="性别">
      <template slot-scope="scope">
        <el-radio v-model="scope.row.gender" label="male">男</el-radio>
        <el-radio v-model="scope.row.gender" label="female">女</el-radio>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', gender: 'male' },
        { name: '李四', gender: 'female' },
        { name: '王五', gender: 'male' },
      ],
    };
  },
};
</script>

2. 使用el-radio-group实现单选按钮：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="gender" label="性别">
      <template slot-scope="scope">
        <el-radio-group v-model="scope.row.gender">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
        </el-radio-group>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', gender: 'male' },
        { name: '李四', gender: 'female' },
        { name: '王五', gender: 'male' },
      ],
    };
  },
};
</script>

以上两种方式都可以实现el-table中的单选按钮功能，具体选择哪种方式根据实际情况选择。

eltable 展开折叠获取数据

为了实现el-table的展开折叠获取数据，可以通过以下步骤实现：

1.在el-table中添加expand属性，用于控制展开和折叠状态。

2.在el-table-column中添加type属性，用于指定列的类型，例如selection、index、expand等。

3.在el-table-column中添加slot-scope属性，用于指定列的作用域，例如header、default等。

4.在template中添加el-table-column的作用域插槽，用于自定义展开行的内容。

5.在methods中添加handleExpand方法，用于处理展开行的数据请求。

下面是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.subData">
          <el-table-column prop="name" label="Name"></el-table-column>
          <el-table-column prop="age" label="Age"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 18,
          subData: []
        },
        {
          name: 'Mike',
          age: 22,
          subData: []
        }
      ]
    }
  },
  methods: {
    handleExpand(row, expandedRows) {
      if (expandedRows.length > 1) {
        expandedRows.shift();
      }
      if (row.subData.length === 0) {
        // 发送请求获取子数据
        // getSubData(row.id).then(res => {
        //   row.subData = res.data;
        // });
      }
    }
  }
}
</script>