在開發過程中，會遇到這樣的需求，用到了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上的屬性。。