需求:
企业分类(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)"> </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=