elementUI 表格组件结合单选框做单选效果显示

确实菜，真的爱2024-11-21 2:37

实现的效果：点击表格行，前面的radio框实现勾选

代码

javascript 复制代码

      <el-table-column align="center" label="选择" width="70">
        <template #default="scope">
          <el-radio-group v-model="scope.row.isChecked">
            <el-radio :value="true"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>

value值一定要绑定一个bool值，且为真，isChecked是row上新加的一个属性，目的是实现单选框的勾选状态。

表格

javascript 复制代码

    <el-table :data="apiTableData" 
       style="width: 100%" 
       highlight-current-row
       @current-change="handleTableChange"
       @cell-click="handleCellClick"
       border>

事件

javascript 复制代码

/** 单选表格 */
const handleTableChange =(cur,old)=>{
  cur.isChecked=true
  if(old){
    old.isChecked = false
  }
}
/** 点击单元格 */
const handleCellClick = (cur)=>{
  cur.isChecked = true
}