在Vue.js中使用el-table创建的表中点击链接时，如何显示api调用的内容？(元素-ui)

在Vue.js中使用el-table创建的表中点击链接时，可以通过以下步骤显示API调用的内容：

首先，需要在el-table的列定义中添加一个自定义的列，用于显示链接按钮。可以使用el-table-column的type属性来定义该列的类型为自定义列。例如：

<el-table-column type="custom" label="操作">
  <template slot-scope="scope">
    <el-button type="text" @click="showAPICall(scope.row)">
      查看API调用
    </el-button>
  </template>
</el-table-column>

上述代码中，通过slot-scope="scope"来获取每一行的数据，并将showAPICall方法绑定到按钮的点击事件上。

在Vue实例中，定义showAPICall方法来处理点击事件，并获取相应的API调用内容。可以通过发送HTTP请求获取API的响应数据，然后将数据保存在Vue实例的一个属性中，用于在页面中展示。例如：

data() {
  return {
    apiCallContent: '', // 保存API调用的内容
  }
},
methods: {
  showAPICall(row) {
    // 发送HTTP请求获取API调用的内容
    // 例如使用axios库发送GET请求
    axios.get('/api/call', { params: { id: row.id } })
      .then(response => {
        this.apiCallContent = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

上述代码中，使用axios库发送GET请求获取API调用的内容，并将响应数据保存在apiCallContent属性中。

在页面中展示API调用的内容。可以使用el-dialog组件来创建一个对话框，并在其中展示API调用的内容。例如：

<el-dialog title="API调用内容" :visible.sync="dialogVisible">
  <pre>{{ apiCallContent }}</pre>
</el-dialog>

上述代码中，通过visible.sync绑定对话框的显示状态，并使用双花括号语法展示apiCallContent属性的值。

在Vue实例中定义dialogVisible属性来控制对话框的显示与隐藏。例如：

data() {
  return {
    apiCallContent: '', // 保存API调用的内容
    dialogVisible: false, // 控制对话框的显示与隐藏
  }
},
methods: {
  showAPICall(row) {
    // 发送HTTP请求获取API调用的内容
    // 例如使用axios库发送GET请求
    axios.get('/api/call', { params: { id: row.id } })
      .then(response => {
        this.apiCallContent = response.data;
        this.dialogVisible = true; // 显示对话框
      })
      .catch(error => {
        console.error(error);
      });
  }
}

上述代码中，通过设置dialogVisible属性为true来显示对话框。

以上就是在Vue.js中使用el-table创建的表中点击链接时显示API调用内容的完整步骤。

关于Vue.js、el-table、axios等相关技术和工具的详细介绍和使用方法，请参考腾讯云的相关文档和官方网站：

请注意，以上所提供的链接和品牌商与云计算无关，仅用于参考和学习目的。