自学内容网 自学内容网

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

实现的效果:点击表格行,前面的radio框实现勾选
在这里插入图片描述
代码

      <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上新加的一个属性,目的是实现单选框的勾选状态。
表格

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

事件

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

原文地址:https://blog.csdn.net/qq_39307266/article/details/143874294

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!