代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script src="../js/vuex.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="栏目名称"
width="180">
</el-table-column>
<el-table-column
label="图标">
<template v-slot="scope">
<img :src="scope.row.icon" width="100px" height="100px">
</template>
</el-table-column>
</el-table>
</template>
</div>
<script>
let { mapState, mapGetters, mapMutations, mapActions } = Vuex
let store = new Vuex.Store({
state: {
tableData: []
},
mutations: {
SET_TABLEDATA(state,payload) {
state.tableData = payload
}
},
actions: {
// 异步请求
findAllCategories(context){
$.get(
'http://203.195.246.58:5588/category/findAll',
(res) => {
if(res.status === 200) {
context.commit('SET_TABLEDATA',res.data)
}
}
)
}
}
})
let vm = new Vue({
el: '#app',
data: {
},
computed: {
...mapState(['tableData'])
},
store,
methods: {
// 映射vuex中的actions方法
...mapActions(['findAllCategories'])
},
created() {
// 调用请求接口方法
this.findAllCategories()
}
})
</script>
</body>
</html>
最后实现的效果如下图所示：
1173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
