Element: [Bug, Report], the, props, of, expand, table

Created on 25 Jul 2017 · 8Comments · Source: ElemeFE/element

Element UI version

1.4.0

OS/Browsers version

win10

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/uxnxpshq/

Steps to reproduce

点击table展开 setTimeOut模拟异步获取数据
但是数据在更新后并不会立即更新到dom上
必须再次点击展开才会更新

可以改之为响应式更新吗？

What is Expected?

table展开项异步更新dom

What is actually happening?

table展开项在下一次才会更新dom

Source

bltbbb

Most helpful comment

用了$set添加了异步返回的数据后 expand 不晓得为啥自己关掉了。。。

版本已经是 2.4.1 了

Palenew on 21 Jun 2018

👍4

All 8 comments

Translation of this issue:

Element UI version

1.4.0

OS/Browsers version

Win10

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/uxnxpshq/

Steps to reproduce

Click table to expand the setTimeOut simulation to obtain the data asynchronously

However, the data is updated and will not be updated immediately to the DOM
You must click on "expand" again to update

Can I change it to a response update?

What is Expected?

The table expansion entry asynchronously updates the DOM

What is actually happening?

The table expansion entry will update the DOM next time

element-bot on 25 Jul 2017

结论

这个不是 Element UI 的问题

问题的原因

你的数据里的 test 属性不是响应式的，所以你改了之后没有动态更新，具体可参考 Vue 官方文档

解决方案

预先在数据里定义 test 属性

var Main = {
    data() {
      return {
        tableData5: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          // 预先定义 test 属性
          test: ''
        }]
      }
    },
    methods:{
        expendFn:function(row){
        setTimeout(function(){
            row.test = "testtest"
        },500)
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

后期设置 test 属性为响应式

var Main = {
    data() {
      return {
        tableData5: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }
    },
    methods:{
      expendFn:function(row){
        // 此处可使用箭头函数改善
        var $vm = this;
        setTimeout(function(){
            // row.test = "testtest"
               $vm.$set(row, 'test', 'testtest')
        }, 500)
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')