2月17日 ElementUI 表格-2 数据动态加载
表格
创建一个简单的表格
在开发过程中，我们要逐渐养成模块化开发的习惯，比如我们要做一个表格展示管理员账号，那么可以把它做成一个独立的模块。
这种形式的好处是，将来去到公司时，都是以这种方式，将一个个小任务分派下来的，我们要做的可能就只有一个大管理功能的某些小模块。这些模块的功能更加单一更加纯粹，做完之后统一提交，由某个人负责将大家写的模块整合起来，做成完整的功能。
我们写了/components/admin/adminTable.vue用来放置账号管理的表格组件。
<el-table>是ElementUI的表格组件，定义一个表格,border是时候显示边框，stripe是时候显示隔行的斑马线条纹背景，data属性用于动态绑定数据。
<el-table-column>是表格组件内用来定义列，一定要在<el-table>标签内使用。他的属性如下：
- prop:要绑定的数据字段
- label:要显示的标题
- width：固定列宽为指定值
- min-width:设定列的最小宽度值
<template>
<div>
<el-table :data="list" border stripe>
<el-table-column prop="id" label="编号" width="100"></el-table-column>
<el-table-column prop="name" label="姓名" min-width="200"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: "1", name: "abc" },
{ id: "2", name: "abc234234" },
{ id: "2", name: "abc234234" },
{ id: "2", name: "abc234234" },
{ id: "2", name: "abc234234" }
]
};
}
};
</script>设定列内容的对其方式
- align 标题、内容的对其方式
header-align 标题对其方式
如果要让内容和标题都以相同方式对其，只需要设定align就可以了，如果要单独修改头部的对其方式，则用header-align设定。
表格内容格式化
内容的格式化
默认情况下，我们的单元格显示的数据，就是当前绑定的字段对应的数据值。数据是什么，就显示什么。
有时，我们想要对显示的内容格式进行修改，这时候，就需要用到
formatter 用来格式化内容 Function(row, column, cellValue, index) <el-table-column prop="id" label="编号" width="100" :formatter="format"></el-table-column> methods: {
//函数返回单元格格要显示的数据值
format(row, column, cellValue, index){
console.log(row) //当前这一行的数据
console.log(column) //列的配置信息
console.log(cellValue) //当前单元格的值
console.log(index) //当前行的索引值
return "ID:"+cellValue;
}
}使用这种方式去格式化内容，最终只会显示出字符串数据。想要进行标签混排成复杂的格式是不行。
复杂的内容可采用插槽
<el-table-column prop="name" label="姓名" min-width="200" align="right" header-align="center">
<template v-slot="scope">
<el-button type="primary" >按钮</el-button>
{{scope.$index}}-{{scope.row.id}}-{{scope.row.name}}
</template>
<template v-slot:header="scope">
{{scope.$index}}姓名
</template>
</el-table-column>使用插槽，我们可以在表格中编排出任意格式的单元格内容（或表头内容）。 插槽有两个
- default：列的单元格内容的插槽位
- header：列的头部内容的插槽位
相比之下，这种方式更加灵活而且便捷，不需要单独创建函数，而且可以支持任意内容，任意格式显示。
动态加载表格数据示例
axios发送ajax请求
import axios from "axios";axios.get('http://lihangsoft.com:3001/admin/get',{
}).then((res)=>{
console.log(res)
})这个请求会失败，因为我们励航的接口后台没有开启跨域访问。
很多时候，我们在开发过程中，需要请求后端API的数据，而我们的域名跟后端的域名不一致。这时候，我们用代理来解决这个问题。
使用代理解决跨域问题
如果没有vue.config.js，自己建一个
module.exports={
//开发服务器配置
devServer:{
//代理设置
proxy:{
/**
* 转发所有以/api/开头的请求
* /api/admin/get => http://lihangsoft.com:3001/admin/get
*/
'^/api':{
target:'http://lihangsoft.com:3001',//转发到该地址
//配置对转发后的目录的重写规则
pathRewrite:{
//把/api替换为空,^表示开头开始匹配
"^/api":""
},
//将发出的请求头部中的来源信息改为目标服务器域名，可以更好的伪造请求
changeOrigin: true
}
}
}
}配置好代理服务器的转发规则后，我们对于所有的当前服务器/api/开头的访问，都会转发到lihang服务器去，并且转发后的路径会去掉目录开头的/api。
现在我们已经可以对数据进行请求了，但是lihang后台要求我们必须登录才可以访问
在目标服务器进行登录
修改登录页的代码，将输入的用户名和密码发送到后台进行登录操作
原始代码：
login() {
this.$cookies.set("user", this.loginname, "10h");
var returnUrl = this.$route.query.returnUrl;
if (returnUrl) {
//登录完毕，回到原来的页面
this.$router.push(returnUrl);
} else {
//到home页
this.$router.push("/home");
}
}改为：
login() {
axios.post("/api/login", {
loginname: this.loginame,
password: this.password
})
.then(res => {
//请求返回结果为true表示登录成功
//cookie会在登录成功后由服务器设置，不需要手动设置
if (res.data.success) {
var returnUrl = this.$route.query.returnUrl;
if (returnUrl) {
//登录完毕，回到原来的页面
this.$router.push(returnUrl);
} else {
//到home页
this.$router.push("/home");
}
} else {
//失败提示
alert(res.data.message);
}
});
}然后路由前置守卫、母版页的退出功能，cookie名称要换成node_auth。
现在登陆后，就允许请求lihang后台的数据，不会再提示登陆后再试了。
动态加载表格数据
<template>
<div>
<el-table :data="list" stripe>
<el-table-column prop="Id" label="编号" min-width="100"></el-table-column>
<el-table-column prop="LoginName" label="姓名" min-width="200" ></el-table-column>
</el-table>
</div>
</template>
<script>
import axios from "axios";
export default {
mounted() {
//挂载组件后，立即调用，加载数据
this.loadData();
},
data() {
return {
list: []
};
},
methods: {
loadData() {
axios.get("/api/admin/get").then(res => {
this.list = res.data.rows;
});
}
}
};
</script>
