element el-table radio 单选表格 / 表单实现

最新推荐文章于 2023-08-24 10:28:05 发布

alokka

最新推荐文章于 2023-08-24 10:28:05 发布

阅读量1.1k

点赞数

分类专栏： element

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

版权

Vue.js Element-UI 表格单选事件处理

关键词由CSDN通过智能技术生成

element 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<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">&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>
</body>
<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>

</html>

alokka

关注

0
点赞
踩
1

收藏

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

<!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"> <
复制链接

扫一扫

专栏目录