table复选框的默认选中

最新推荐文章于 2024-07-18 18:02:30 发布

weixin_42024333

最新推荐文章于 2024-07-18 18:02:30 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42024333/article/details/134182065

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <!-- table的默认选中 -->
    <div id="app">
        <el-table ref="multipleTable1" :data="tableData" tooltip-effect="dark" style="width: 100%"
            >
            <el-table-column type="selection" width="55">
            </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 style="margin-top: 20px">
            <el-button>切换第二、第三行的选中状态</el-button>
            <el-button>取消选择</el-button>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return { 
                lastTableName: '',
                selection: [],
                visible: false,
                  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: {
               
    },
    mounted() {
        this.$refs.multipleTable1.toggleRowSelection(this.tableData[0], true)
        this.$refs.multipleTable1.toggleRowSelection(this.tableData[1], true)

    },
    })
</script>

</html>