elementui 表格默认勾选

效果图如下：

 表格显示如下：

<el-table ref="deliverDataTable" :data="deliverDialogTableData" tooltip-effect="dark" >
    <el-table-column type="selection" @selection-change="handleSelectionChange" width="55" >
    </el-table-column>
    <el-table-column prop="goods_name" label="商品" align="left" >
        <template slot-scope="scope" class="tableStyle">
            <span style="float: left">
                <img :src="deliverDialogTableData[scope.$index].source" class="head_pic"/>
            </span>
            <span style="float: left;margin-top:20px;">&nbsp;&nbsp;&nbsp;{{ scope.row.goods_name}}</span>
        </template>
    </el-table-column>
    <el-table-column  prop="good_number" label="数量" align="center" > </el-table-column>
    <el-table-column prop="courier_number" label="物流单号" align="center" > </el-table-column>
    <el-table-column prop="state" label="状态" align="center"> </el-table-column>
</el-table>

注： ref="deliverDataTable"                                         与 this.$refs.deliverDataTable.toggleRowSelection(row);一样

        :data="deliverDialogTableData"                           动态数据（由后台传过来的）

        type="selection"                                                   实现多选

        @selection-change="handleSelectionChange"   事件监听

         toggleRowSelection                                            用于多选表格
    

表格显示如下：vue js代码如下

加载数据记录状态

return {
    deliverDialogTableData:[],
},
created () {
    // 初始化获取列表数据
    this.initData()
},
methods: {
    initData(){
        let _this = this
        ordersApi.getById(this.id)
            .then(response => {
            const data = response.data
            this.deliverDialogTableData = data.obj
             // 记录表格选中状态
            _this.$nextTick(() => {
                    _this.toggleSelection(_this.deliverDialogTableData)
            })
        })
    },
    // 选中数据的集合通过this.multipleSelection.prop字段 取得每一个选项的值
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
}

设置选中状态（重点）

this.$refs.deliverDataTable.toggleRowSelection(item)        与上面的必须一样，不能重复

    // 设置选中
    toggleSelection (_this) {
      if (_this) {
        _this.forEach((item) => {
          // 设置该表格选框选中
          this.$refs.deliverDataTable.toggleRowSelection(item)
        })
      } else {
        this.$refs.deliverDataTable.clearSelection()
      }
    },