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

在开发过程中，会遇到这样的需求，用到了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具体数据
                {
                    name : '李云曦',
                    age : '18'
                },
                {
                    name : '王宏远',
                    age : '13'
                },
                {
                    name : '欧阳舒影',
                    age : '20'
                },
            ],
        }
    },

到这里，一个基本的表格就展现出来了

接下来，再来探讨如何实现默认选中的功能：在具体数据每一项添加_checked:true就可以实现默认选中
tips：数据如果是后台接口获取的，也可以动态设置这个属性实现默认选中

{
    name : '李云曦',
    age : '18',
    _checked : true     //true表示选中
},

还有另一种方法：不需要上面的设置，利用this.$refs.table的ref属性值.objData[index]._isChecked = true

// 通过this.$refs.demodata获取到对应的table，再通过objData设置对应索引的_isChecked的true/false
// this.$refs.table的ref属性值.objData[index]._isChecked = true
   this.$refs.demodata.objData[1]._isChecked = true;    //设置选中第一项

个人理解两者的区别：第一种是在操作数据，更符合vue；而通过ref的方式找到的是对应的DOM，然后操作该DOM上的属性。