关于vue.js:vue-table多选改状态

<template>

<div>
    <el-form>
        <el-form-item>
            <el-button type="primary" size="mini" @click='readed'> 标记为已读 </el-button>
        </el-form-item>
    </el-form>

<el-table ref="multitable" :data="tableData" border tooltip-effect="dark" style="width:100%" @selection-change = "handleSelected">
    <el-table-column type="selection" width="55">   </el-table-column>
    <el-table-column prop="sender" label="发送人姓名"> </el-table-column>
    <el-table-column prop="title" label="题目"> </el-table-column>
    <el-table-column prop="content" label="内容"> </el-table-column>
    <el-table-column prop="read" label="状态" sortable>
        <template slot-scope='scope'>
             <div v-if="scope.row.is_read==1"><el-link type="primary" @click="handleRead(scope.row)"> 未读 </el-link></div>
             <div v-else> 已读 </div>   
        </template>    
    </el-table-column>
    <el-table-column prop="created_at" label="发送工夫"> </el-table-column>
</el-table>
<el-pagination layout="total,prev, pager, next" @current-change="requestData" :total="paginate.total" :current-page.sync='paginate.current_page' :page-size='paginate.size'></el-pagination>
</div>

</template>
<script>
import http from ‘../../../libs/http’;
export default {

data(){
    return {tableData:[],
        multiVal:[],
        paginate:{
            current_page:1,
            total:1,
            from:1,
            to:1,
            size:15
        }
    }
},
methods:{handleSelected(val){this.multiVal = [];
        this.multiVal = val;
    },
    requestData(){http.get('/api/supplier/supplierPrivateMessage',{params:{page:this.paginate.current_page}}).then(res=>{
            this.tableData = res.data.data;
            this.paginate.current_page= res.data.meta.current_page;
            this.paginate.total = res.data.meta.total;
            this.paginate.from = res.data.meta.from;
            this.paginate.to = res.data.meta.to;
        })

    },
    handleRead(row){console.log(row);
        this.multiVal =[];
        this.multiVal.push(row.id);
        this.readed();},
    readed(){
        let data={msg_ids : this.multiVal}
        http.post('/api/supplier/backPrivateMessageToRead',data).then(res=>{if(res.data.code==200){this.$message({type:'success',message:"批改胜利"});
                this.requestData();}else{this.$message({type:'danger',message:'批改失败'});
            }
        })
    }
},
created(){this.requestData();
}

}
</script>

http.js

import axios from ‘axios’
import config from ‘../config’
import {Message} from ‘element-ui’

const httpRequest = axios.create({
timeout: 5000,
baseURL: config.apiUrl
})

httpRequest.interceptors.request.use(
config => {

return config

},
error => {

return Promise.reject(error)

}
)

export function setHttpToken (token) {
httpRequest.defaults.headers.common.Authorization = Bearer ${token}
}

httpRequest.interceptors.response.use(
response => {

return response

},
error => {

let message = error.response.data.message ? error.response.data.message : error.response.statusText
let dangerouslyUseHTMLString = false

if (error.response.status === 422 && error.response.data.hasOwnProperty('errors')) {
  message += '<br>'
  for (let key in error.response.data.errors) {let items = error.response.data.errors[key]
    if (typeof items === 'string') {message += `${items} <br>`
    } else {error.response.data.errors[key].forEach(item => {message += `${item} <br>`
      })
    }
  }
  dangerouslyUseHTMLString = true
}

Message({
  dangerouslyUseHTMLString,
  message: message,
  type: 'error'
})

return Promise.reject(error)

}
)

export default httpRequest