vue+element-ui初始化表格时某一列根据后台返回内容显示不同的icon

    这次的业务需求是这样的：①若从后台返回的数据中装备的经纬度为null，则详情列只显示“装备详情”这几个字的跳转链接；②若装备的经纬度不为null，则详情列显示一个定位icon+“装备详情”这几个字的跳转链接，如图所示：

    需求已经确定，此时查看element的table实例element table表格，看能否找到灵感。发现有一实例中将“标签”一列的不同内容显示为不同type类型的tag标签，效果如下图所示：

    其“标签”列的HTML代码为：

    <el-table-column prop="tag" label="标签" width="100">
      <template slot-scope="scope">
        <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}
        </el-tag>
      </template>
    </el-table-column>

    由此，实现代码可借助于三目表达式，当返回数据的经纬度为null时：

<el-button icon="">装备详情</el-button>

    当返回数据的经纬度不为null时：

<el-button icon="el-icon-location">装备详情</el-button>

    具体“装备详情”列的实现代码为：

      <el-table-column label="装备详情" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" :icon="scope.row.longitude === null ? '' : 'el-icon-location'" @click="checkDetail(scope.row.id)">
            装备详情
          </el-button>
        </template>
      </el-table-column>

    所实现的效果如下图所示：

    至此，便实现了业务需求。