elementUI 表格中运用radio默认选中与取消

最新推荐文章于 2025-06-24 13:58:12 发布

原创最新推荐文章于 2025-06-24 13:58:12 发布 · 2.7w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#工作小总结

本文介绍了一种使用Element UI框架实现的表格操作方法，包括如何通过点击选择表格行并进行数据提交，以及如何通过Radio组件来标记选定的行。此外，还展示了如何从后台获取数据并填充到表格中，同时设置默认选中的项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table :data="logQueryDataaa" border   highlight-current-row  @row-click="clickrow">
    <el-table-column width="55" align="center">
        <template scope="scope">
            <el-radio class="radio" v-model="radioData"  :label="scope.row.userPhone" @change="changeUserPhone"></el-radio>
        </template>
    </el-table-column>
    <el-table-column label="手机号" prop="userPhone" align="center" width="200"></el-table-column>
    <el-table-column label="姓名" prop="userName" align="center" width="200"></el-table-column>
    <el-table-column label="身份证号" prop="idCard" align="center" width="" ></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top:10px;" >
    <el-button type="primary" @click="sendNewDriver(logQueryDataaa)" >提交</el-button>
</div>

data(){
    return{
        logQueryDataaa:[],
        radioData:''
    }
},

methods: {
    changeUserPhone(value){
        //int类型转换为string
            this.radioData=value.toString();
    },
    clickrow(row, event, column){
        //获取所需id
        this.radioId = row.id;
    },
    //更换司机
    log_query_short_dataClick4(row, column, cellValue){
        let param={truckId:row.truckId,companyId:row.companySummaryId};
        logQueryDriverImg(param)
            .then(res=>{
                if(res.status==1){
                    this.logQueryDataaa=res.result;
                    for (let i=0; i<res.result.length; i++){//是个数组所以取值时应先循环
                        if (this.driverPhone== res.result[i].userPhone){//如果有对应的值则默认选中
                            this.changeUserPhone(this.driverPhone)
                            return;//不加return的话会重复判断导致无法选中
                        }else {//如果没有则没有选中
                         this.radioData='';
                        }
                    }
                }else{
                   
                }

            })
    },}