1.在表单校验中可以校验表单中的某些属性,其用法如下:
this.$refs.form.validateField(prop, (valid) => {
// prop代表你要传入的属性,可以是单个属性,也可以是数组
// 有一个回调函数来执行判断
})
复制代码
2.在可折叠的表格的展开行中请求数据时,关闭另一个展开行,展开自己:
<!-- 学员分组列表 -->
<template>
<div>
<div style="text-align: right;margin: 10px auto;">
<el-button type="primary" @click="onAdd">+分组</el-button>
</div>
<hr>
<el-table
ref="table"
:data="tableData"
:row-key="getRowKeys"
:expand-row-keys="expands"
:header-cell-style="{background: '#F5F7FA'}"
style="width: 100%;margin-top: 10px;"
@expand-change="handleChange">
<el-table-column type="expand">
<template slot-scope="props">
<el-form v-loading="loading" label-position="left" label-width="120px" inline class="table-expand">
<el-form-item label="科目">
<span>{{ props.row.subject }}</span>
</el-form-item>
<el-form-item label="添加组员">
<span>{{ expandList.length }}</span>
</el-form-item>
<el-form-item v-for="item in expandList" :key="item.objectId" label="组员">
<div class="table-expand-item">
<img :src="imgSrc" style="width:30px;height:30px;border-radius:30px;">
<p>{{ item.name }}</p>
<p>{{ item.grade }}</p>
<p>已消耗课时(k)/总课时(k):{{ item.consumePeriod+'/'+item.totalPeriod }}</p>
</div>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="分组类型"
prop="coachType.name"
align="center">
</el-table-column>
<el-table-column
label="组员姓名"
prop="stuNames"
align="center">
</el-table-column>
<el-table-column
label="修改日期"
align="center">
<template slot-scope="scope">
<span>
{{ scope.groupDate | timefmt }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="onDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
expandList: [],
expands: [],
getRowKeys(row) {
return row.groupId
}
}
},
methods: {
// 获取展开行的数据
handleChange(row, expandedRows) {
console.log('展开行:', row, expandedRows)
this.loading = true
const that = this
if (expandedRows.length) {
that.expands = []
this.expandList = []
if (row) {
that.expands.push(row.groupId)
ClsTeach.SIGSTU_ALLOC_GROUP({ groupId: row.groupId }).then(res => {
this.expandList = res
this.loading = false
})
}
} else {
that.expands = []
this.loading = false
}
}
},
}
</script>
复制代码
首先设置row-key,行数据的key,取值为Function(row)/String,我用函数来标识该行数据的唯一性,同时还需要设置expand-row-keys,可以通过该属性设置table目前的展开行,需要设置row-key属性才能使用,改属性为展开行的keys数组。 最后是展开行变化时的函数:expand-change,在这个函数中写判断逻辑,实现展开某一行,折叠另一行。
3.表单校验中清除其中某个项的校验
for (const item of this.$refs.form.fields) {
if (item.prop === 'teachingPlan') {
item.resetField()
}
}
复制代码
4.解决elementui中选择器改变时数据未改变的情况
<el-form-item :required="true" prop="orgs" label="适用校区:">
<el-select
v-model="form.orgs"
collapse-tags
multiple
placeholder="请选择"
style="width: 245px;"
@remove-tag="$forceUpdate()"
@change="selectAll">
<el-option
v-for="item in orgList"
:key="item.objectId"
:label="item.label"
:value="item.objectId">
</el-option>
</el-select>
</el-form-item>
<script>
export default {
methods: {
selectAll(val) {
// 这行代码用来刷新render层的数据
this.$forceUpdate()
...逻辑代码
}
}
}
</script>
复制代码
在change函数中加上这行代码用来刷新render层的数据,实现数据的更改。