创建根据 table 行而变化的元素 UI 工具提示内容

Question

我有一个方法可以根据元素 UI table 中列的值 returns 工具提示内容的字符串，但是它只返回第一列的值鼠标悬停后更改。

<el-table-column label="Service Lines / MSDRG" prop="code" sortable min-width="120">
  <template slot-scope="slotData">
    <el-tooltip 
      effect="dark" 
      placement="top-start" 
      :content="returnSvclinesValue(slotData.row.code , name)"
    >
    <span>{{ slotData.row.code }}</span>
    </el-tooltip>
   </template>
</el-table-column>

这里是returnSvclineValue(code, name)

的方法

returnSvclinesValue: function(code, name) {
  const svclinesTrimmedByName = svclines.find(i => i.label == name && i.value == name)
  const svclineValue = svclinesTrimmedByName.children.find(l => l.value = code )
  return svclineValue.label
}

对于方法 returnSvclinesValue(code, name)，它有效，我只需要它根据行的代码呈现不同的内容..是否有某种解决方法？

Answer 1

使用下面提到的参数进行计算属性：

computed:{
   returnSvclinesValue(){
      return (code, name)=> {
       const svclinesTrimmedByName = svclines.find(i => i.label == name && i.value == name)
       const svclineValue = svclinesTrimmedByName.children.find(l => l.value == code )
       return svclineValue.label
     }
  }

}

创建根据 table 行而变化的元素 UI 工具提示内容

Creating Element UI tooltip content that changes depending on the table-row

javascript

vue.js

element-ui