vue2+antDesignVue实现表格内容颜色不同+toolTip文字提示

最近接了一个需求，要在表格内实现文字的一个提示，同时根据单据返回的状态标记内容的颜色。实现效果如下：实现思路：看一下antd里面的关于表格的相关插槽之类的

scopedSlots

使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: 'XXX'}

这样看来在插槽里面加入文字提示就行

先在column里面定义一下 

 {
          title: '同步状态',
          align: 'center',
          dataIndex: 'syncStatus_dictText',
          scopedSlots:{ customRender:'syncStatus' }
        },

table里面的代码如下：

<a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
        :scroll="{x:true}"
      >
            //record表示这一行的数据
        <span slot="syncStatus" slot-scope="text,record">
          <a-tooltip>
            //这里的title指的是文字提示的内容
            <template slot="title">
              {{ record.syncMsg }}
            </template>
            //这里的class绑定样式，当状态为40时颜色为红色
            <span 
              :class="{'warningColor':record.syncStatus=='40'}">
            //插值表达式里表示是表格的文字内容
              {{ record.syncStatus_dictText }}
            </span>
          </a-tooltip>
        </span>
</a-table>


<style scoped>
.warningColor{
  color:red
}
</style>