element-ui table单选

2019年9月16日 181次阅读 来源: Independent

element-ui table单选

element-ui中只给了多选行，没有单选；那么咱们就自己动动小脑袋写一个呗。

    
    <el-table ref="multipleTable" :data="designList" tooltip-effect="dark" height="255" style="width: 100%" @current-change="clickChange">
        <el-table-column label="选择" width="55">
            <template slot-scope="scope">
                <el-radio  v-model="tableRadio" :label="scope.row"><i></i></el-radio>
            </template>
        </el-table-column>
        <el-table-column prop="designerCode" label="设计顾问" header-align="center" align="center"></el-table-column>
        <el-table-column prop="designerName" label="姓名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="storeCode" label="门店编码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="storeName" label="门店名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="cityName" label="所属城市" header-align="center" align="center"></el-table-column>
    </el-table>
            
    clickChange (item) {
        this.tableRadio = item
    },

效果图：
《element-ui table单选》

    原文作者：Independent
    原文地址: https://segmentfault.com/a/1190000019772493
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞