vue项目引用 iView 组件——Table组件的调用以及默认选中某些项

最新推荐文章于 2023-09-23 00:14:29 发布

WXY19951125

最新推荐文章于 2023-09-23 00:14:29 发布

阅读量7.3k

点赞数 2

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/WXY19951125/article/details/84585008

版权

本文介绍了在Vue项目中使用iView的Table组件时，如何实现页面加载时默认选中某些项。通过在数据项中添加&_checked:true属性，或者利用this.$refs.table的ref属性动态设置，默认选中功能可以轻松实现。这两种方法分别对应于操作数据和直接操作DOM的不同策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程中，会遇到这样的需求，用到了Table组件，但是一进来页面需要默认选中某些项……

前期的iView的安装以及引用就不赘述了，直接切入主题：

html结构如下：

<!--
    demodata：table的一个标识（也可以理解成一个名字）
    liststyle：定义table需要的格式及其关键字
    listdata：指table具体的数据
-->
<Table ref="demodata" :columns="liststyle" :data="listdata" border></Table>

接下来，就是配置js部分了

data(){
        return{
            liststyle : [   //table数据格式
                {
                    type: 'selection',
                },
                {
                    title: '名字',
                    key: 'name',
                },
                {
                    title: '年龄',
                    key: 'age',
                },
            ],
            listdata : [    //table具体数据