🐛 [Bug]: popeditor的属性auto-reset=true，值无法改变无法触发change事件

Open Lymanli opened this issue 1 year ago • 1 comments

Version

3.16.0

Vue Version

3.4.27

Link to minimal reproduction

https://opentiny.design/vue-playground?cmpId=popeditor&fileName=auto-reset.vue&apiMode=Options&mode=pc&theme=default

<template>
  <div>
		<tiny-button @click="switchAutoReset">切换autoReset</tiny-button>
    autoReset: {{autoReset}}
    <tiny-popeditor
      v-model="value"
      :grid-op="gridOp"
      text-field="name"
      value-field="id"
      :conditions="conditions"
      :auto-reset="autoReset" @change="changeFunc" @popup="handlePopup" @close="handleClose"
    ></tiny-popeditor>
  </div>
</template>

<script>
import { Popeditor, Button as TinyButton, Modal } from '@opentiny/vue'

export default {
  components: {
    TinyPopeditor: Popeditor,
    TinyButton
  },
  data() {
    const dataset = [
      {
        id: '1',
        name: 'GFD科技YX公司',
        city: '福州',
        province: '福建'
      },
      {
        id: '2',
        name: 'WWW科技YX公司',
        city: '深圳',
        province: '广东'
      },
      {
        id: '3',
        name: 'RFV有限责任公司',
        city: '中山',
        province: '广东'
      },
      {
        id: '4',
        name: 'TGB科技YX公司',
        city: '龙岩',
        province: '福建'
      },
      {
        id: '5',
        name: 'YHN科技YX公司',
        city: '韶关',
        province: '广东'
      },
      {
        id: '6',
        name: 'WSX科技YX公司',
        city: '黄冈',
        province: '武汉'
      },
      {
        id: '7',
        name: 'KBG物业YX公司',
        city: '赤壁',
        province: '武汉'
      },
      {
        id: '8',
        name: '深圳市福德宝网络技术YX公司',
        province: '广东',
        city: '深圳'
      },
      {
        id: '9',
        name: 'KBG物业YX公司',
        city: '赤壁',
        province: '武汉'
      },
      {
        id: '10',
        name: '深圳市福德宝网络技术YX公司',
        province: '广东',
        city: '深圳'
      }
    ]

    return {
      autoReset: false,
      value: '',
      gridOp: {
        columns: [
          {
            field: 'id',
            title: 'ID',
            width: 40
          },
          {
            field: 'name',
            title: '名称'
          },
          {
            field: 'province',
            title: '省份',
            width: 80
          },
          {
            field: 'city',
            title: '城市',
            width: 80
          }
        ],
        data: dataset
      },
      conditions: [
        { label: '公司名', field: 'name' },
        { label: '城市', field: 'city' }
      ]
    }
  },
  methods: {
    switchAutoReset() {
      this.autoReset = !this.autoReset;
    },
    changeFunc(val, data) {
      Modal.message({
        message: `值变为${val},${JSON.stringify(data)}`,
        status: 'info'
      })
      console.log(`值变为${val},${JSON.stringify(data)}`)
    },
    handlePopup() {
      Modal.message({
        message: 'popup 弹窗打开事件',
        status: 'info'
      })
    },
    handleClose() {
      Modal.message({
        message: 'close 弹窗关闭事件',
        status: 'info'
      })
    }
  }
}
</script>