先上代码
<template>
<div id="app">
<el-row>
<el-col :span="8" :offset="6">
<el-input placeholder="请输入关键字" icon="search" v-model="search"></el-input>
</el-col>
<el-col :span="2">
<el-button type="primary" @click="dialogVisible = true">添加</el-button>
<el-button @click="getData"></el-button>
</el-col>
</el-row>
<el-table
:data="tables"
border
style="width: 100%">
<el-table-column
prop="fatherName"
label="父类别名称"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="类别名称"
width="180">
</el-table-column>
<el-table-column
prop="description"
label="类别描述">
</el-table-column>
<el-table-column
prop="done"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
style="margin-right: 20px"
@click="editTableData(scope.$index)">
编辑
</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%">
<el-row>
父类别名称 ：
<el-select v-model="value" value="">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-row>
<el-row>
类别名称：
<el-input v-model='productName' style="width: 70%;margin: 10px 0 10px 0"></el-input>
</el-row>
<el-row>
类别描述：
<el-input v-model='productDescription' style="width: 70%"></el-input>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addData">确 定</el-button>
</div>
</el-dialog>
<el-dialog
title="提示"
:visible.sync="dialogVisibleb"
width="30%">
<el-row>
父类别名称 ：
<el-select v-model="value" value="">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-row>
<el-row>
类别名称：
<el-input v-model='productNameb' style="width: 70%;margin: 10px 0 10px 0"></el-input>
</el-row>
<el-row>
类别描述：
<el-input v-model='productDescriptionb' style="width: 70%"></el-input>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleb = false">取 消</el-button>
<el-button type="primary" @click="updateData">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
import ajax from '../ajax';
export default {
name: 'home',
data() {
return {
tableData: [],
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
search: '',
dialogVisible: false,
dialogVisibleb: false,
visible: false,
productName: '',
productDescription: '',
productNameb: '',
productDescriptionb: '',
_index: ''
};
},
computed: {
//查询
tables() {
if (this.search) {
return this.tableData.filter(item =>
Object.keys(item).some(key =>
String(item[key]).toLowerCase().indexOf(this.search) > -1
)
);
} else return this.tableData;
}
},
methods: {
editTableData(index) {
this.dialogVisibleb = true;
this._index = index;
},
//添加
addData() {
this.dialogVisible = false;
ajax({
url: '/goods/category',
method: 'post',
data: {
'description': this.productDescription,
'name': this.productName,
'parentId': 0,
}
}).then(res => {
this.getData();
}).catch(error => {
console.log(error);
});
},
//删除
handleDelete(index) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
ajax({
url: '/goods/category',
method: 'delete',
params: {
'categoryId': this.tableData[index].resDataId,
}
}).then(res => {
this.getData();
}).catch(error => {
console.log(error);
});
done();
instance.confirmButtonLoading = false;
} else {
done();
}
}
});
this.visible = false;
},
//修改
updateData() {
ajax({
url: '/goods/category',
method: 'put',
data: {
'categoryId': this.tableData[this._index].resDataId,//this.tableData[this._index].resDataId
'description': this.productDescriptionb,
'name': this.productNameb,
'parentId': 0,
}
}).then(res => {
this.getData();
}).catch(error => {
console.log(error);
});
this.dialogVisibleb = false;
},
getData() {
ajax({
url: '/goods/category',
method: 'get',
}).then(res => {
this.tableData.splice(0, this.tableData.length);
const resData = res.data.data.data;
resData.forEach((items) => {
if(items.delete === false){
this.tableData.push({
'name': items.name,
'description': items.description,
'resDataId': items.categoryId
});
}
});
}).catch(error => {
console.log(error);
});
}
},
};
实现请求后台API接口使用的是axios
由于我的后台接口需要根据接口需要，使用了自定义axios实例的方法，在上面的链接中有具体例子，我将axios的实例封装到ajax.js的文件中，后续的调用均使用的是ajax（只是个名字），下面是我ajax.js的代码
import axios from 'axios';
import Cookies from 'js-cookie';
const ajax = axios.create({
baseURL: '/apis/',
timeout: 120000,
withCredentials: true,
headers: {
token: *****
appId: *****
},
});
export default ajax;
相关的参数在链接中说的很清楚，不明白的可以去查阅文档。要注意你的项目中已经npm install axios 和 js-cookie。
写道这里就已经可以发送请求了，但是还会出现跨域的问题，这时候就需要在config.js中配置一下代理,由于vue-cli3移除了config.js文件，因此我们需要自己创建一个，需要创建在项目的根目录下。具体如何配置可以vue-cli配置参考
下面给出我的vue.config.js代码(文件名必须带上vue)
module.exports = {
devServer: {
proxy: {
'/apis':{
pathRewrite: {
'^/apis': '' },
target: 'http://你要代理的计算机域名',
changOrigin: true
}
},
disableHostCheck: true,
}
};
这里解释一下最后的 disableHostCheck: true, 由于我这里的后端请求数据需要需要一个cooke值来验证，当时解决的方法是修改了hosts。但是这样就不能通过webpack-dev-server的安全检查，所以就需要设置这一句来取消host检查。
到这里，就已经可以请求到数据了。接下来就是对数据经行处理并渲染到页面上，这里记录我遇到的几个问题。
1.修改操作的时候，需要获取到当前那一行的索引，由于使用了element中的el-dialog对话弹窗，如果直接使用scope.$index无法获取到索引，因此在data中设置_index属性，用editTableData方法将索引赋值给_index在在修改方法中通过this._index来获取某一行的索引。
editTableData(index) {
this.dialogVisibleb = true;
this._index = index;
},
2.在实现删除功能的时候，使用的请求方法是delete，平时并没有接触到这个请求，一般都是get+post就解决了，开始请求一直报500的错，后来了解了之后才知道detele传参方法和get相同，put和post传参方法相同。
3.删除按钮不要使用el-popover组件来实现，在有多个标签的时候，他们会共用一个visible,当点击框外的时候，这个组件会默认visible: false,就会导致弹出失效。我后来使用了MessageBox。