element-ui使用Radio单选表格行

功能示例地址：

http://vscss.com/vue/1.html

http://vscss.com/vue/2.html

 

功能代码：

<!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">
    <style type="text/css">
        
    </style>
</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 scope="scope">
                    <!-- <el-radio v-model="radio" :label="scope.$index" @change.native="getCurrentRow(scope.$index)">&nbsp;</el-radio> -->
                    <el-radio v-model="radio" :label="scope.$index">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" 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"></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: [{
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-08',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-06',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-07',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }]
                }
            },

            methods: {
                showRow(row) {
                    //赋值给radio
                    this.radio = 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>

 

<!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>test</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">
    <style type="text/css">
    </style>
</head>

<body>
    <div id="app">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @current-change="handleCurrentChange"
            highlight-current-row>
            <el-table-column width="50">
                <template scope="scope">
                    <el-checkbox-group v-model="checkedLists" @change="handleCheckedChange">
                    <!-- <el-checkbox-group v-model="checkedLists"> -->
                        <el-checkbox :label="scope.$index" name="type">&nbsp;</el-checkbox>
                    </<el-checkbox-group>
                </template>
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" 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"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    checkedLists: [],
                    tableData: [{
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-08',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-06',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-07',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }]
                }
            },

            methods: {
                handleCheckedChange(value) {
                    if (value.length > 1) {
                        this.checkedLists = [];
                        value.shift();
                        console.log(value);
                        this.checkedLists.push(value[0]);
                    }
                },
                getCurrentRow(val) {
                    console.log(val);
                    this.checkedLists = [];
                    this.checkedLists.push(val);
                },
                handleCurrentChange(currentRow, oldCurrentRow) {
                    console.log(currentRow);
                    this.currentRow = currentRow;
                    this.getCurrentRow(this.tableData.indexOf(currentRow));
                }
            }
        });
    </script>
</body>

</html>

 

posted on 2018-06-07 13:56  jasonduanmu  阅读(1248)  评论(0)  编辑  收藏  举报

导航