我首先要说的是，不会就不要乱写嘛，让我又浪费两小时去思考调试及查百度。
<el-table :data=”packData”>中:data=”packData”是错误的，有些博客就是这么写的。
<el-table :data=”tableData”>这样写就ok
上面错误的写法，浏览器控制会报
Property or method “packData” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the proper
大概意思就是没定义初始化，但是我已经给他初始化了，还是不行，我就没理睬了，但是后面从数据库返回数据，按照文档写了，依旧没有数据，在这里浪费两小时，最后改tableData就成功了。
以下是vue前端源码，后端我就省略了，如果你需要可以评论
<template>
<div>
<el-button type=”primary” round @click=”gettableData()”
>查询数据
</el-button>
<el-table
ref=”singleTable”
:data=”tableData”
highlight-current-row
@current-change=”handleCurrentChange”
style=”width: 100%”>
<el-table-column type=”selection” width=”55″></el-table-column>
<el-table-column
prop=”cusid”
label=”顾客ID”
width=”120″>
</el-table-column>
//…. 根据自己数据库的字段添加
</el-table>
<div style=”margin-top: 20px”>
<el-button @click=”setCurrent(tableData[1])”>选中第二行</el-button>
<el-button @click=”setCurrent()”>取消选择</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentRow: null
}
},
mounted() {
this.gettableData()
},
methods: {
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
handleCurrentChange(val) {
this.currentRow = val;
},
gettableData() {
//这里是ajax发送的请求路径
this.$axios.post(‘/selectdata’).then((res) => {
console.info(res.data);
this.tableData = res.data;//把传回来数据赋给tableData
}).catch(function(error){
console.log(error);
})
},
}
}
</script>
原文地址:https://blog.csdn.net/zhen16670000351/article/details/126674665
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_50671.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
