el-table实现单选

吴小花的博客

已于 2023-06-26 14:22:19 修改

阅读量6.7k

点赞数 2

文章标签： vue.js javascript elementui

于 2023-03-13 14:49:09 首次发布

本文链接：https://blog.csdn.net/weixin_39089928/article/details/129493402

版权

本文介绍如何在Vue.js应用中利用ElementUI的el-table组件实现单选功能。当选择企业分类时，弹窗会自动勾选已选分类并高亮显示；在弹窗中选定新的分类后，下拉框会更新选中项。关键代码包括data定义、methods方法及组件的封装和使用。

摘要由CSDN通过智能技术生成

需求：

企业分类（1）选择企业分类，打开弹窗，自动勾选已经选择的企业分类。高亮显示

（2）弹窗选择某个企业分类，点击确定，下拉框的企业分类变更。取消不变更。

dom :

弹出框用el-popover , 难点在于单选按钮，el-table实现如下：

        <el-form-item label="企业分类" prop="customerGroup" class="approve-form">
            <el-select
              v-model="formEnterpriseInfo.customerGroup"
              clearable
              placeholder="请选择"
              :disabled="formEnterpriseInfo.auditStatus==='1'||formEnterpriseInfo.auditStatus==='0'"
              @change="customerGroupChange"
            >
              <el-option
                v-for="dict in customerGroupDict"
                :key="dict.dictCode"
                :label="dict.dictName"
                :value="dict.dictCode"
              ></el-option>
            </el-select>
            <el-popover
              v-model="visible"
              :disabled="formEnterpriseInfo.auditStatus==='1'||formEnterpriseInfo.auditStatus==='0'"
              placement="bottom"
              title=""
              width="800"
              trigger="click"
              @show="showCustomerGroup"
            >

              <el-table
                id="customerGroupTable"
                ref="singleTable"
                :data="gridData"
                height="350"
                highlight-current-row
                @current-change="handleCurrentChange"
                @row-click="rowClick"
              >
                <el-table-column label="选择" width="50">
                  <template slot-scope="scope">
                    <el-radio v-model="radioIdSelect" :label="scope.row.id" @change.native="handleSelectionChange(scope.$index,scope.row)">&nbsp;</el-radio>
                  </template>
                </el-table-column>

                <el-table-column width="150" property="className" label="企业分类"></el-table-column>
                <el-table-column property="classDes" label="描述"></el-table-column>

              </el-table>
              <div id="btnGrop" class="linebuttons">
                <el-button class="blue-border" @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="confirmSelet">确 定</el-button>
              </div>
              <span slot=