请问怎么实现编辑时显示elselect,编辑完毕隐藏elselect

这里用vif点击编辑时,马上可以获取焦点,但是选中elselect中的值不能显示,在vue开发者工具中也没有值,@change事件也获取不到value,

但是改成vshow,以上问题就不存在,但是当点击编辑该cell时,初始获取不到焦点,这样当用户点击该单元格,但是不选中任何东西,该select也不隐藏,需要用户点击获取焦点,在失去焦点才可以隐藏

  1. <el-table-column label=“出货点” width=“80” align=“center” prop=“deliverLocation”>
  2. <template slot-scope=“{row,column}”>
  3. <el-select v-model=“row.deliverLocation” v-if=“row[column.property + ‘_isEdit’]” filterable
  4. @blur=“alterData($event,row, column)” @change=“alterData($event,row, column)” size=“mini” :ref=“column.property”>
  5. <el-option v-for=“item in deliverLocationList” :key=“item.value” :label=“item.text”
  6. :value=“item.value”>
  7. </el-option>
  8. </el-select>
  9. <span v-if=“!row[column.property + ‘_isEdit’]”>{{ row.deliverLocation }}</span>
  10. </template>
  11. </el-table-column>
  1. //编辑单元格事件更新
  2. editName(row, column) {
  3. if (!column.property + ‘_isEdit’) {
  4. this.$set(row, column.property + ‘_isEdit’, true);
  5. }
  6. row[column.property + ‘_isEdit’] = true;
  7. this.$nextTick(() => {
  8. //判断该单元格是否放置元素组件
  9. if (typeof this.$refs[column.property] == ‘undefined’) return;
  10. //通过对元素设置特殊属性x来定义是否能够获取焦点
  11. //if (this.$refs[column.property].$attrs.x) {
  12. console.log(this.$refs[column.property]);
  13. this.$refs[column.property] && this.$refs[column.property].focus()
  14. //}
  15. })
  16. },
  17. //表格触发事件
  18. alterData(event,row, column) {
  19. console.log(event,row,column);
  20. this.$nextTick(() => {
  21. row[column.property + ‘_isEdit’] = false;
  22. })
  23. },

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注