element的鼠標移到圖片時，放大預覽效果。實現思路：element的 el-table + el-popover

export default {

data () {

return {

tabData: [

{ image_url: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg', imgName: 'apple' },

{ image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', imgName: 'bird' },

{ image_url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', imgName: 'deer' }

]

}

}

}

復制代碼

注：

① el-table綁定的data屬性是表格渲染的列表tabData，el-table-column是表格的單元格，它的prop的值是tabData中的鍵名;show-overflow-tooltip是內容過多顯示tooltip;

② el-popover 是element的Popover 彈出框， placement是出現的位置

③ popover中有 slot="reference" 的元素是當前觸發popover的元素。

④ popover中 trigger="hover"，表示hover時觸發

所以上面的：

是觸發了popover的元素，即鼠標移動到這張圖片上，下面那張圖片就會顯示，且寬為popover中的定義的 width="250"；

它只是popover的顯示內容，popover 彈出框被觸發，它就顯示

復制代碼

效果如圖( 鼠標經過第三張圖 )：

小結：

① Table中的，表格自定義列模板

通過 Scoped slot 可以獲取到 row, column, $index 和 store(table 內部的狀態管理)的數據；

參考：element.eleme.cn/#/zh-CN/com…

② Popover 彈出框

trigger屬性用于設置何時觸發 Popover，支持四種觸發方式：hover，click，focus 和 manual。對于觸發 Popover 的元素，有兩種寫法：使用 slot="reference" 的具名插槽，或使用自定義指令v-popover指向 Popover 的索引ref。

總結

以上是生活随笔為你收集整理的element表格图片放大_图片在表格中,鼠标经过图片上方，图片有放大预览效果 （vue+element ）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。