element-ui使用Radio單選表格行

時間 2019-12-08

標籤 element 使用 radio 單選表格简体版

原文原文鏈接

功能示例地址：javascript

功能代碼：vue

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。