antd vue 嵌套子表格遇到的问题总结

今天使用antd vue 的嵌套子表格遇到了一个问题，子表格中的操作栏上的按钮需要根据点击变化，也就是说要根据数据来更改状态，但是改变数据后页面没有渲染

<a-table
      :columns="columns"
      :scroll="{ x: true, y: 450 }"
      :data-source="data"
      rowKey="id"
      @expand="expand"
      :pagination="ipagination"
      @change="handleTableChange"
    >
      <template slot="action" slot-scope="text, record">
        <a @click="payGood(record)">支付</a>
        <a-divider type="vertical" />
        <a-popconfirm title="是否删除?" @confirm="() => deleteFile(record)">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
      <span slot="state" slot-scope="text">
        <span v-if="text == 0">待支付</span>
        <span v-if="text == 1">已支付</span>
        <span v-if="text == -1">支付失败</span>
      </span>
      <a-table
        slot="expandedRowRender"
        slot-scope="record"
        :columns="innerColumns"
        :data-source="record.orderItemList"
        :pagination="false"
        rowKey="id"
        size="small"
      >
        <span slot="status" slot-scope="text">
          <span v-if="text.state == 0">待支付</span>
          <span v-if="text.state == 1">已支付</span>
          <span v-if="text.state == -1">支付失败</span>
        </span>
        <span slot="operation" slot-scope="text, record" class="table-operation">

			          <!-- 根据数据来更改图标 -->
          <a @click="preview(text, record)"><a-icon :type="record.isPre ? 'eye' : 'eye-invisible'" /></a>


          <a-divider type="vertical" v-if="record.state == 1" />
          <a v-if="record.state == 1">下载</a>
        </span>
      </a-table>
    </a-table>

效果图

点击图标，icon就会来回切换，刚开始是直接改变record的值，发现数据值变了，页面没有跟着渲染

preview(text, record){
      record.isPre=true
    },

然后一直找。发现问题所在
由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化
最后使用的是this.$set 解决的

preview(text, record) {
      this.$set(record, 'isPre', true)
    },

感谢这篇文章点击