fix: descriptions not re-rendered when slots is updated (#2275)

packages/descriptions/__tests__/descriptions.spec.ts

@@ -95,4 +95,27 @@ describe('Descriptions.vue', () => {
 
     expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual('2')
   })
+
+  test('re-rendered when slots is updated', async () => {
+    const CHANGE_VALUE = 'company'
+    const wrapper = _mount(`
+      <el-descriptions v-for="(remark,index) in remarks" :key="index" :title="remark">
+        <el-descriptions-item label="remark">
+          <el-tag size="small">{{remark}}</el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+      <button @click="onClick">click</button>
+    `, () => {
+      return {
+        remarks: ['school', 'hospital'],
+      }
+    }, {
+      onClick () {
+        this.remarks[0] = CHANGE_VALUE
+      },
+    })
+    wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.find('el-tag').text()).toBe(CHANGE_VALUE)
+  })
 })

packages/descriptions/src/index.vue

@@ -12,7 +12,7 @@
     <div class="el-descriptions__body">
       <table :class="[{'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']">
         <tbody>
-          <template v-for="(row, index) in rows" :key="index">
+          <template v-for="(row, index) in getRows()" :key="index">
             <el-descriptions-row :row="row" />
           </template>
         </tbody>
@@ -96,7 +96,7 @@ export default defineComponent({
       return node
     }
 
-    const rows = computed(() => {
+    const getRows = () => {
       const children = flattedChildren(slots.default?.()).filter(node => node?.type?.name === 'ElDescriptionsItem')
       const rows = []
       let temp = []
@@ -123,11 +123,11 @@ export default defineComponent({
       })
 
       return rows
-    })
+    }
 
     return {
       descriptionsSize,
-      rows,
+      getRows,
     }
   },
 })