element table radio 单选表格实现

alokka

已于 2023-02-15 09:30:53 修改

阅读量1.3k

点赞数 1

分类专栏： element 文章标签： elementui

于 2021-08-27 09:40:21 首次发布

本文链接：https://blog.csdn.net/alokka/article/details/118470170

版权

element 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在这里插入图片描述

实际效果可以自行复制下面代码查看
后续可以自己封装成 table 组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <title>element-ui单选表格行</title>
    <meta name="description" content="test">
    <meta name="Keywords" content="test">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="app">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="showRow" @current-change="handleCurrentChange" highlight-current-row >
            <el-table-column width="50">
                <template slot-scope="scope">
                    <el-radio v-model="radio" :label="scope.$index">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="mobileNumber" label="电话号码" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    radio: '',
                    tableData: [{
                        radioId: '0',
                        name: 'lokka',
                        mobileNumber: '11111111111111111',
                        address: '北京市朝阳区十里堡 123 号'
                    }, {
                        radioId: '1',
                        name: 'lokka',
                        mobileNumber: '11111111111111111',
                        address: '北京市朝阳区十里堡 123 号'
                    }, {
                        radioId: '2',
                        name: 'lokka',
                        mobileNumber: '11111111111111111',
                        address: '北京市朝阳区十里堡 123 号'
                    }, {
                        radioId: '3',
                        name: 'lokka',
                        mobileNumber: '11111111111111111',
                        address: '北京市朝阳区十里堡 123 号'
                    }, {
                        radioId: '4',
                        name: 'lokka',
                        mobileNumber: '11111111111111111',
                        address: '北京市朝阳区十里堡 123 号'
                    }, {
                        radioId: '5',
                        name: 'lokka',
                        mobileNumber: '11111111111111111',
                        address: '北京市朝阳区十里堡 123 号'
                    }, {
                        radioId: '6',
                        name: 'lokka',
                        mobileNumber: '11111111111111111',
                        address: '北京市朝阳区十里堡 123 号'
                    }]
                }
            },

            methods: {
                showRow(row) {
                    //赋值给radio
                    this.radio = this.tableData.indexOf(row)
                    console.log(this.tableData.indexOf(row))
                },
                getCurrentRow(val) {
                    console.log(val)
                },
                handleCurrentChange(currentRow, oldCurrentRow){
                    console.log(currentRow)
                    this.currentRow = currentRow
                    this.getCurrentRow(this.tableData.indexOf(currentRow))
                }
            }
        });
    </script>
</body>

</html>

alokka

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
element table radio 单选表格实现

实际效果可以自行复制下面代码查看后续可以自己封装成 table 组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalabl.
复制链接

扫一扫

专栏目录