Element UIフォームリセット機能の不具合解決

Element UIのドキュメントによると、フォームをリセットするには以下の関数を使用します：

しかし、この関数が期待通りに動作しない場合があります。

解決策：form-itemにprop属性を追加し、その値をinputのv-modelと一致させる必要があります。

<el-form-item prop="userDescription" label="説明">
  <el-input v-model="formData.userDescription"></el-input>
</el-form-item>

prop属性はフォーム検証時だけでなく、フォームリセット時にも必要です。

注：リセット機能はprop属性を持つオブジェクトにのみ適用されます。

data() {
  return {
    profile: {
      name: '',
      email: ''
    },
    singleValue: ''
  }
}
// profileオブジェクトはprop属性と対応しているためリセット可能
// singleValueにオブジェクトを代入してもリセット不可
// singleValue自体がプロパティを持たないため

Element UIテーブルの自動スクロール実装

<template>
<el-table ref="dataTable" :data="tableData" height="250" style="width: 100%">
</template>

<script>
export default {
  mounted() {
    this.initAutoScroll(this.$refs.dataTable);
  },
  methods: {
    initAutoScroll(tableInstance) {
      let scrollInterval;
      const container = tableInstance.bodyWrapper;
      
      const startScroll = () => {
        scrollInterval = setInterval(() => {
          container.scrollTop += 0.5;
          
          if (container.scrollHeight - container.scrollTop <= container.clientHeight + 1) {
            container.scrollTop = 0;
          }
        }, 50);
      };
      
      startScroll();
      
      container.addEventListener('mouseenter', () => {
        clearInterval(scrollInterval);
      });
      
      container.addEventListener('mouseleave', startScroll);
    }
  }
}
</script>