search

opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.66k stars 264 forks source link

🐛 [Bug]: Grid-column默认插槽中读取深层次字段时控制台会有警告 #1279

Closed ichynul closed 3 months ago

ichynul commented 10 months ago

Version

3.12

Vue Version

3.3

Link to minimal reproduction

https://opentiny.design/vue-playground?mode=pc&theme=default#3.12|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1wiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjEyL3J1bnRpbWUvdGlueS12dWUubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWljb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xMi9ydW50aW1lL3RpbnktdnVlLWljb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWxvY2FsZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjEyL3J1bnRpbWUvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xMi9ydW50aW1lL3RpbnktdnVlLWNvbW1vbi5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlLXRoZW1lQDMuMTIvXCIsXCJzb3J0YWJsZWpzXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9zb3J0YWJsZWpzQDEuMTUuMC9tb2R1bGFyL3NvcnRhYmxlLmVzbS5qc1wifX0iLCJ0c2NvbmZpZy5qc29uIjoie1xyXG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcclxuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxyXG4gICAgXCJjaGVja0pzXCI6IHRydWUsXHJcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXHJcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVcIjogXCJFU05leHRcIixcclxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcclxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZVxyXG4gIH0sXHJcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJ0YXJnZXRcIjogMy4zXHJcbiAgfVxyXG59XHJcbiIsIm9wZXJhdGlvbi1jb2x1bW4vY3VzdG9tLW9wZXJhdGlvbi1jb2x1bW4udnVlIjoiPHRlbXBsYXRlPlxuICA8dGlueS1ncmlkIDpkYXRhPVwidGFibGVEYXRhXCI+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW4gdHlwZT1cImluZGV4XCIgd2lkdGg9XCI2MFwiPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiB0eXBlPVwic2VsZWN0aW9uXCIgd2lkdGg9XCI2MFwiPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiBmaWVsZD1cIm5hbWVcIiB0aXRsZT1cIuWQjeensFwiPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiBmaWVsZD1cImFyZWFcIiB0aXRsZT1cIuaJgOWxnuWMuuWfn1wiPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiBmaWVsZD1cImFkZHJlc3NcIiB0aXRsZT1cIuWcsOWdgFwiPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiBmaWVsZD1cImludHJvZHVjdGlvblwiIHRpdGxlPVwi5YWs5Y+4566A5LuLXCIgc2hvdy1vdmVyZmxvdz48L3RpbnktZ3JpZC1jb2x1bW4+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW4gdGl0bGU9XCLmk43kvZxcIiB3aWR0aD1cIjEwMFwiPlxuICAgICAgPHRlbXBsYXRlICNkZWZhdWx0PVwiZGF0YVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGVtby1jdXN0b20tY29sdW1uXCI+PCEtLSDlnKjmraTlhYPntKDliqDkuIogdi1pZj1cImRhdGEucm93Ll9fYWN0aW9uX19cIiDlj6/op6PlhrMgLS0+XG4gICAgICAgICAgPHRpbnktYnV0dG9uIDpkaXNhYmxlZD1cImRhdGEucm93Ll9fYWN0aW9uX18uc2VhcmNoLmRpc2FibGVkXCI+XG4gICAgICAgICAgICA8dGlueS1pY29uLXNlYXJjaCBjbGFzcz1cInRpbnktc3ZnLXNpemVcIiBAY2xpY2s9XCJjbGlja0hhbmRsZXIoZGF0YS5yb3cpXCI+PC90aW55LWljb24tc2VhcmNoPlxuICAgICAgICAgICAge3tkYXRhLnJvdy5fX2FjdGlvbl9fLnNlYXJjaC5sYWJlbH19XG4gICAgICAgICAgPC90aW55LWJ1dHRvbj5cbiAgICAgICAgICA8dGlueS1idXR0b24gOmRpc2FibGVkPVwiZGF0YS5yb3cuX19hY3Rpb25fXy5lZGl0LmRpc2FibGVkXCI+XG4gICAgICAgICAgICA8dGlueS1pY29uLWVkaXQgY2xhc3M9XCJ0aW55LXN2Zy1zaXplXCIgQGNsaWNrPVwiY2xpY2tIYW5kbGVyKGRhdGEucm93KVwiPjwvdGlueS1pY29uLWVkaXQ+XG4gICAgICAgICAgICB7e2RhdGEucm93Ll9fYWN0aW9uX18uZWRpdC5sYWJlbH19XG4gICAgICAgICAgICA8IS0t5o+S5qe95Lit5Y+q6IO95L2/55SoIGRhdGEucm93Lnh4eCAtLT5cbiAgICAgICAgICAgIDwhLS1cbiAgICAgICAgICAgICAg5bGC57qn5pu05rex5aaCIGRhdGEucm93Lnh4eC55eXnjgIFkYXRhLnJvdy54eHgueXl5Lnp6elxuICAgICAgICAgICAgICDlnKjmlbDmja7mupDkuLrnqbrml7bvvIjlpoLpppbmrKHlvILmraXliqDovb3mlbDmja7mnJ/pl7TvvIlcbiAgICAgICAgICAgICAg5o6n5Yi25Y+w5Lya6K2m5ZGK77yaW3RpbnktZ3JpZF0g5YiX55qE6buY6K6k5o+S5qe95Lit5a2Y5Zyo6K+t5rOV6ZSZ6K+v77yM6K+35qOA5p+l44CCXG4gICAgICAgICAgICAtLT5cbiAgICAgICAgICA8L3RpbnktYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvdGVtcGxhdGU+XG4gICAgPC90aW55LWdyaWQtY29sdW1uPlxuICA8L3RpbnktZ3JpZD5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXAgbGFuZz1cImpzeFwiPlxuICBpbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnXG4gIGltcG9ydCB7IEdyaWQgYXMgVGlueUdyaWQsIEJ1dHRvbiBhcyBUaW55QnV0dG9uLCBHcmlkQ29sdW1uIGFzIFRpbnlHcmlkQ29sdW1uLCBNb2RhbCB9IGZyb20gJ0BvcGVudGlueS92dWUnXG4gIGltcG9ydCB7IGljb25FZGl0LCBpY29uU2VhcmNoIH0gZnJvbSAnQG9wZW50aW55L3Z1ZS1pY29uJ1xuXG4gIGxldCBkYXRhID0gW1xuICAgIHtcbiAgICAgIGlkOiAnMScsXG4gICAgICBuYW1lOiAnR0ZE56eR5oqAWVjlhazlj7gnLFxuICAgICAgYXJlYTogJ+WNjuS4nOWMuicsXG4gICAgICBhZGRyZXNzOiAn56aP5beeJyxcbiAgICAgIGludHJvZHVjdGlvbjogJ+WFrOWPuOaKgOacr+WSjOeglOWPkeWunuWKm+mbhOWOmu+8jOaYr+WbveWutjg2M+mhueebrueahOWPguS4juiAhe+8jOW5tuiiq+aUv+W6nOiupOWumuS4uuKAnOmrmOaWsOaKgOacr+S8geS4muKAneOAgicsXG4gICAgICBfX2FjdGlvbl9fOiB7XG4gICAgICAgIHNlYXJjaDogeyBsYWJlbDogJ+aQnOe0oicsIGRpc2FibGVkOiBmYWxzZSB9LFxuICAgICAgICBlZGl0OiB7IGxhYmVsOiAn57yW6L6RJywgZGlzYWJsZWQ6IHRydWUgfVxuICAgICAgfVxuICAgIH0sXG4gICAge1xuICAgICAgaWQ6ICcyJyxcbiAgICAgIG5hbWU6ICdXV1dX56eR5oqAWVjlhazlj7gnLFxuICAgICAgYXJlYTogJ+WNjuWNl+WMuicsXG4gICAgICBhZGRyZXNzOiAn5rex5Zyz56aP55Sw5Yy6JyxcbiAgICAgIGludHJvZHVjdGlvbjogJ+WFrOWPuOaKgOacr+WSjOeglOWPkeWunuWKm+mbhOWOmu+8jOaYr+WbveWutjg2M+mhueebrueahOWPguS4juiAhe+8jOW5tuiiq+aUv+W6nOiupOWumuS4uuKAnOmrmOaWsOaKgOacr+S8geS4muKAneOAgicsXG4gICAgICBfX2FjdGlvbl9fOiB7XG4gICAgICAgIHNlYXJjaDogeyBsYWJlbDogJ+aQnOe0oicsIGRpc2FibGVkOiBmYWxzZSB9LFxuICAgICAgICBlZGl0OiB7IGxhYmVsOiAn57yW6L6RJywgZGlzYWJsZWQ6IGZhbHNlIH1cbiAgICAgIH1cbiAgICB9LFxuICAgIHtcbiAgICAgIGlkOiAnMycsXG4gICAgICBuYW1lOiAnUkZW5pyJ6ZmQ6LSj5Lu75YWs5Y+4JyxcbiAgICAgIGFyZWE6ICfljY7ljZfljLonLFxuICAgICAgYWRkcmVzczogJ+S4reWxseW4gicsXG4gICAgICBpbnRyb2R1Y3Rpb246ICflhazlj7jmioDmnK/lkoznoJTlj5Hlrp7lipvpm4TljprvvIzmmK/lm73lrrY4NjPpobnnm67nmoTlj4LkuI7ogIXvvIzlubbooqvmlL/lupzorqTlrprkuLrigJzpq5jmlrDmioDmnK/kvIHkuJrigJ3jgIInLFxuICAgICAgX19hY3Rpb25fXzoge1xuICAgICAgICBzZWFyY2g6IHsgbGFiZWw6ICfmkJzntKInLCBkaXNhYmxlZDogdHJ1ZSB9LFxuICAgICAgICBlZGl0OiB7IGxhYmVsOiAn57yW6L6RJywgZGlzYWJsZWQ6IGZhbHNlIH1cbiAgICAgIH1cbiAgICB9LFxuICBdO1xuXG4gIC8vIGNvbnN0IHRhYmxlRGF0YSA9IHJlZihkYXRhKTsgLy/nm7TmjqXnu5HlrprvvIzmraPluLhcblxuICAvL+aooeaLn+aVsOaNruivt+axguW7tui/n1xuICBjb25zdCB0YWJsZURhdGEgPSByZWYoW10pO1xuICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICB0YWJsZURhdGEudmFsdWUgPSBkYXRhO1xuICB9LCA1MDApO1xuXG4gIGNvbnN0IFRpbnlJY29uRWRpdCA9IGljb25FZGl0KClcbiAgY29uc3QgVGlueUljb25TZWFyY2ggPSBpY29uU2VhcmNoKClcblxuICBmdW5jdGlvbiBjbGlja0hhbmRsZXIocm93KSB7XG4gICAgTW9kYWwubWVzc2FnZSh7IG1lc3NhZ2U6IEpTT04uc3RyaW5naWZ5KHJvdyksIHN0YXR1czogJ3N1Y2Nlc3MnIH0pXG4gIH1cbjwvc2NyaXB0PlxuXG48c3R5bGUgc2NvcGVkPlxuICAuZGVtby1jdXN0b20tY29sdW1uIHtcbiAgICBmb250LXNpemU6IDA7XG4gIH1cblxuICAuZGVtby1jdXN0b20tY29sdW1uIHN2ZyB7XG4gICAgZm9udC1zaXplOiAxNnB4O1xuICAgIGZpbGw6IHZhcigtLXRpLWNvbW1vbi1jb2xvci1saW5lLWFjdGl2ZSk7XG4gIH1cblxuICAuZGVtby1jdXN0b20tY29sdW1uIHN2Zzpob3ZlciB7XG4gICAgZmlsbDogIzQwYTlmZjtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cblxuICAuZGVtby1jdXN0b20tY29sdW1uIHN2Zzpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDhweDtcbiAgfVxuPC9zdHlsZT4iLCJfbyI6e319

Step to reproduce

<template>
  <tiny-grid :data="tableData">
    <tiny-grid-column type="index" width="60"></tiny-grid-column>
    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
    <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
    <tiny-grid-column title="操作" width="100">
      <template #default="data">
        <div class="demo-custom-column"><!-- 在此元素加上 v-if="data.row.__action__" 可解决 -->
          <tiny-button :disabled="data.row.__action__.search.disabled">
            <tiny-icon-search class="tiny-svg-size" @click="clickHandler(data.row)"></tiny-icon-search>
            {{data.row.__action__.search.label}}
          </tiny-button>
          <tiny-button :disabled="data.row.__action__.edit.disabled">
            <tiny-icon-edit class="tiny-svg-size" @click="clickHandler(data.row)"></tiny-icon-edit>
            {{data.row.__action__.edit.label}}
            <!--插槽中只能使用 data.row.xxx -->
            <!--
              层级更深如 data.row.xxx.yyy、data.row.xxx.yyy.zzz
              在数据源为空时（如首次异步加载数据期间）
              控制台会警告：[tiny-grid] 列的默认插槽中存在语法错误，请检查。
            -->
          </tiny-button>
        </div>
      </template>
    </tiny-grid-column>
  </tiny-grid>
</template>

<script setup lang="jsx">
  import { ref } from 'vue'
  import { Grid as TinyGrid, Button as TinyButton, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
  import { iconEdit, iconSearch } from '@opentiny/vue-icon'

  let data = [
    {
      id: '1',
      name: 'GFD科技YX公司',
      area: '华东区',
      address: '福州',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
      __action__: {
        search: { label: '搜索', disabled: false },
        edit: { label: '编辑', disabled: true }
      }
    },
    {
      id: '2',
      name: 'WWWW科技YX公司',
      area: '华南区',
      address: '深圳福田区',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
      __action__: {
        search: { label: '搜索', disabled: false },
        edit: { label: '编辑', disabled: false }
      }
    },
    {
      id: '3',
      name: 'RFV有限责任公司',
      area: '华南区',
      address: '中山市',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
      __action__: {
        search: { label: '搜索', disabled: true },
        edit: { label: '编辑', disabled: false }
      }
    },
  ];

  // const tableData = ref(data); //直接绑定，正常

  //模拟数据请求延迟
  const tableData = ref([]);
  setTimeout(() => {
    tableData.value = data;
  }, 500);

  const TinyIconEdit = iconEdit()
  const TinyIconSearch = iconSearch()

  function clickHandler(row) {
    Modal.message({ message: JSON.stringify(row), status: 'success' })
  }
</script>

<style scoped>
  .demo-custom-column {
    font-size: 0;
  }

  .demo-custom-column svg {
    font-size: 16px;
    fill: var(--ti-common-color-line-active);
  }

  .demo-custom-column svg:hover {
    fill: #40a9ff;
    cursor: pointer;
  }

  .demo-custom-column svg:not(:last-child) {
    margin-right: 8px;
  }
</style>

What is expected

层级只能读到data.row的下一级

<tiny-grid-column title="操作" width="100">
<template #default="data">
{{data.row.aaa}}
</template>
</tiny-grid-column>

What is actually happening

{{data.row.xxx.yyy}} 层级过深的情况下。 表格数据空时，控制台会警告：[tiny-grid] 列的默认插槽中存在语法错误，请检查。 界面没什么异常，就是提示让人觉得是有什么地方有问题。

Any additional comments (optional)

No response

Issues-translate-bot commented 10 months ago

Bot detected the issue body's language is not English, translate it automatically.

Title: 🐛 [Bug]: There will be a warning on the console when reading deep fields in the default slot of Grid-column