elemetui中好用的小技巧-CSDN博客

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>
复制代码