Vue + Element 小技巧
2024-08-30 15:53:12
说是小技巧 ,其实就是本人 就是一个小菜比 。如有大佬可以纠正,或者再救救我这个小菜比 跪谢
1、当后台返回一个字段需要根据不同字段内容在表格内显示相对应的文字(字段内容是死的,表格内需要显示对应文字 也是死的)
例如:后台返回一个status字段,0代表正在生成,1代表成功,2代表失败(当然可能不是数字,可能是文字什么的)
有两钟方法:像上面的的例子的话我们可以写成一个数组,
方法一:相对于下标 let statusList= ['正在生成','成功','失败']
我获取了后台数据,并存在data里面了,例如data字段为tableList
tableList.map((item,index)=>{
item.status = statusList[item.status]
})
方法二:写成一个对象 {0:'正在生成',1:'成功',2:'失败'}
tableList.map((item,index)=>{
item.status = statusList[item.status]
})
2、当我们在使用vue+Element 的时候有很多时候会写到表格,可以将el-table-column 里面的参数 在data里面写一个数组对象,其实效果是一样的只是我个人觉得后面看起来会舒服点
这样表格的html就只需要写一行就够了后面需要增加一列的话,也就是增加一条对象。相对来说,对后期表格字段需要增加,感觉会更好维护
<template>
<div>
<el-table :data="tableData.slice((limitePage.page-1)*limitePage.limit,limitePage.limit*limitePage.page)" border style="width: 100%">
<el-table-column fixed v-for="item in tableList" :key="item" :prop="item.key" :label="item.label" width="150">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"
v-if="scope.row.date != '2016-05-02'"
>查看</el-button
>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<span class="demonstration"></span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="limitePage.page"
:page-sizes="[2, 4]"
:page-size="limitePage.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</div>
</template> <script>
export default {
data() {
return {
tableList:[
{
label:'日期',
key:'date'
},
{
label:'姓名',
key:'name'
},
{
label:'省份',
key:'province'
},
{
label:'市区',
key:'city'
},
{
label:'地址',
key:'address'
},
{
label:'邮编',
key:'zip'
},
],
tableData: [
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
],
limitePage:{
limit:2,
page:1
}
};
},
methods: {
handleClick(row) {
console.log(row);
},
handleSizeChange(val) {
this.limitePage.limit = val;
console.log(val)
},
handleCurrentChange(val) {
this.limitePage.page = val
console.log('handleCurrentChange'+val)
}
}
};
</script> <style>
</style>
最新文章
- RDLC中添加参数,用来显示报表中数据集之外的信息。
- 字符串0.在php和js中转换为布尔类型 值是false还是true
- c# 反射应用之工厂
- C#链接阿里云OCS
- js 判断微信浏览器
- VirtualBox中虚拟Ubuntu添加新的虚拟硬盘
- tar常用解包
- 跨平台通信中间件thrift学习【Java版本】(转)
- Ubunu下安装Docker
- idea类似eclipse鼠标技巧java api信息
- Zabbix实战-简易教程(9)--触发器函数(triggers)
- 一次线上tomcat应用请求阻塞的排查经过
- 微信小程序 页面跳转方式
- 3--TestNG多线程
- UA池和代理池
- CF28D Don&#39;t fear, DravDe is kind 背包
- tensorflow学习4-过拟合-over-fitting
- 糟糕的@@identity,SCOPE_IDENTITY ,IDENT_CURRENT
- java 多线程 25 :线程和线程组的异常处理
- SQL语句常见优化方法