项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示?
废话不多讲,直接看代码:
<template> <Table :columns="columns" :data="data"></Table> </template> <script> export default { data () { return { columns: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' }, { title: '操作', key: 'action', render: (h, { row }) => { return h('div', [ h('Tooltip', { props: { placement: 'top', transfer: 'true', content: '提示文字内容' } }, [ h('Icon', { props: { // custom: 'icon-seewrap' //自定义图标 type: 'md-add', size: '28' }, on: { click: () => { // 添加 alert("添加") } } }) ]) ]) } } ], data: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' } ] } } } </script>