关于日期选择器的注意点
<el-form-item label="结束时间" prop="endTime" >
<el-date-picker v-model="formData.endTime" type="date" placeholder="选择日期"/>
</el-form-item>
注意: 使用普通方法赋值后期可能回出现无法修改的情况,推荐使用 $set 方法
// 使用$set赋值
this.$set(this.formData, "endTime", res.data.endDate);
//this.$set(this.searchMap, "tradedate", new Date());
// 普通赋值方法
this.searchMap.tradedate = tradedate;
输入框enter提交请求
<!-- @keyup.enter.native -->
<el-input @keyup.enter.native="query()"></el-input>
注:如果在再一次点击时会刷新页面,则是因为自动触发页面的提交功能, 产生刷新页面的行为
解决:
如下代码,在 el-form
中 加个 @submit.native.prevent
,就可以了,@submit
: 表单提交.native
绑定系统原生事件.prevent
提交以后不刷新页面
表单重置
<el-form @ref="demoForm"></el-form>
<script>
// 重置
this.$refs.demoForm.resetFields();
// 清空校验
this.$refs.demoForm.clearValidate();
</script>
表格相关
关于表格数据改变页面数据无变化的解决办法
1. 在数据更新之后使用 nextTick方法 中使用this.$refs.table.doLayout()
2、在el-table的属性中增加一个key属性 然后在数据更新之后改变key的值
<el-table
ref="table"
:data="tableData"
:key="itemKey"
></el-table>
// 在tableData赋值的地方,随机设置下key,页面就会刷新了
this.itemKey = Math.random()
关于表格使用展开行
1、只展开一行
<el-table
ref="table"
:data="tableData"
@expand-change="rowExpand"
></el-table>
// 相关函数
rowExpand (row, expandedRows) {
this.expandData = [];
this.getListIODetail(expandedRows[0]);
for (let i = 0; i < expandedRows.length; i++) {
if (expandedRows.length === i + 1) {
this.$refs.myTable.$children[0].toggleRowExpansion(expandedRows[i], true);
} else {
this.$refs.myTable.$children[0].toggleRowExpansion(expandedRows[i], false);
}
}
},
getListIODetail (row) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.$ajax.get('你的地址').then(res => {
if (this.$ifAjax(res)) {
this.expandData = res.data;
}
});
}, 600);
},
2、展开行之后拿到数据页面不渲染 template 里面必须要写上slot-scope="scope" 即使用不到也要写
<el-table
ref="table"
:data="tableData"
@expand-change="rowExpand"
>
<vd-table-column type="expand">
<template slot-scope="scope">
<el-table
:data="expandData"
size="mini"
row-key="aiorId"
>
<el-table-column
label="出库数量"
prop="num"
width="100"
/>
</el-table>
</template>
</el-table-column>
</el-table>
给不同行添加不同颜色
// HTML
<el-table
ref="myTable"
:row-class-name="tableRowClassName"
:stripe="false">
</el-table>
// JS
tableRowClassName ({ row, rowIndex }) {
if (row.color) {
return 'rowColorOne';
} else {
return 'rowColorTwo';
}
},
// CSS
<style>
.el-table .rowColorOne {
background-color: #c7dbf1 !important;
}
.el-table .rowColorTwo {
background-color: #fff !important;
}
</style>
点击某一行添加颜色再次点击去掉颜色
// HTML
<el-table
ref="myTable"
highlight-current-row
>
</el-table>
// CSS
<style>
.el-table__body tr.current-row td {
background-color: pink !important;
}
</style>
去掉表格鼠标经过颜色
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: unset !important;
}
如何在表格中使用多个复选框
相关地址 element的表格中使用多个复选框
使用element-ui中的table修改鼠标经过或悬停行时颜色修改
相关地址 修改表格鼠标悬停的颜色
vue项目中在table表格中使用switch开关
相关地址 使用switch开关
vue项目中在table表格中根据某个字段合并行
const arr = this.tableData;
let rowspan = 1;
let colspan = 1;
// 要合并的列数,这个可以看需求自己定制
const spanColumn = [1, 3, 4];
// 如果是要合并的行
if (spanColumn.includes(columnIndex)) {
// 遍历,如果有相同就加1,这里事先让后端把相同的放一起
for (let i = rowIndex + 1; i < arr.length; i++) {
// phid相同的合并,这里根据需求判断字段
if (row.num === arr[i].num) {
rowspan++;
} else {
break;
}
}
// 如果行号大于0,判断phid等于当前行的上一行就是00 这里的逻辑666
if (rowIndex > 0 && row.num === arr[rowIndex - 1].num) {
rowspan = 0;
colspan = 0;
}
}
// 最后就是返回
return {
rowspan: rowspan,
colspan: colspan
};