锐拓

$\color{green}{1、下载和在线预览}$(锐拓、审核工具)

样例文件、执行文件 搜这样个字段，有下载和在线预览

1. 首先先配置在线预览的文字按钮lang；@/lang/zh/index.js的button里面添加‘在线预览’

样例文件：

（都有两种情况）
return (
              <div>
                  <div class="flex" v-show={r.documentDemoUri}>
                    <a onClick={() => this.$openUrl(r.documentDemoUri)} style="marginRight: 10px;">{ this.$t('button.onlinePreview')}</a>
                    <a onClick={() => this.view(r.documentDemoUri)}>
                      { this.$t('button.download') }
                    </a>
                  </div>
                  <span v-show={!r.documentDemoUri}>/</span>
                </div>
            )

<template slot-scope="record">
            <div class="flex">
              <a-button style="padding: 0;" v-if="record.documentDemoUri" @click="$openUrl(record.documentDemoUri)" type="link">{{ $t('button.onlinePreview') }}</a-button>
              <a-button v-if="record.documentDemoUri" @click="getUrl(record.documentDemoUri)" type="link">{{ $t('button.download') }}</a-button>
            </div>
          </template>

执行文件

  <template slot-scope="record">
            <div class="flex">
              <a-button style="padding: 0;" v-if="record.documentSupplierUrl" @click="$openUrl(record.documentSupplierUrl)" type="link">{{ $t('button.onlinePreview') }}</a-button>
              <a-button v-if="record.documentSupplierUrl" @click="getUrl(record.documentSupplierUrl)" type="link">{{ $t('button.download') }}</a-button>
            </div>
          </template>

$\color{green}{2、列表文案过长展示……}$（意力速）

<a-table
          :rowKey="(record) => record.key"
          size="middle"
          :columns="inventoryColumnsNew"
          :data-source="dataSource"
          :pagination="pagination"
          @change="paginationChange"
          :loading="loading"
          :scroll="{ x: 1000 }"
        >
          <!-- 动态渲染每列的内容 -->
          <template v-for="col in inventoryColumnsNew" #[customRenderSlot(col)]="text, record, index" >
            <span v-if="shouldShowTooltip(col)" :key="col.dataIndex">
              <a-tooltip 
                placement="topLeft"
                :autoAdjustOverflow="true"
                :overlayStyle="{ 
                  maxWidth: `400px`, 
                  wordBreak: 'break-word'
                }">
                <template #title>
                  <span style="display:inline-block;color:#fff;">{{ text }}</span>
                </template>
                <span style="cursor: pointer;">{{ text }}</span>
              </a-tooltip>
            </span>
            <span v-else >{{ text }}</span>
          </template>

          <span slot="num" slot-scope="text, record, index">
            {{ parseInt((pagination.current - 1) * pagination.pageSize + index + 1) }}
          </span>
        </a-table>
        

对应的方法 =>
function customRenderSlot(column) {
    if (column.scopedSlots && column.scopedSlots.customRender) {
      return `${column.scopedSlots.customRender}`;
    }
    return '';
  }
function  shouldShowTooltip(column) {
      return column.showTooltip !== false && column.scopedSlots && column.scopedSlots.customRender && column.scopedSlots.customRender !== 'actions';
    }