首页 技术设计 前端 vue

在开发过程中，会遇到这样的需求，用到了 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表示选中
},

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

// 通过 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 上的属性。