anchor iview 悬浮_iview 表头table 悬浮提示tooltip ；iview 单元格悬浮提示 ；iview table header cell tooltip;...

一、批量悬浮提示

二、提示数据举例

三、核心方法：

//单元格提示

function renderCell(h, params) {

//console.log('h', h)

//console.log('params', params)

var tipsContent = getTips(params.column.key, params.row[params.column.key])

//console.log('tipsContent', tipsContent)

var values = formatTwoDecimalPlaces(params.row[params.column.key])

return h('tooltip',

{

props: {

placement: 'top'

}

},

[

values,//原始数据

h('div',

{

slot: 'content',

style: { whiteSpace: 'normal', wordBreak: 'break-all' }

},

tipsContent //提示语句

)

]

)

}

//表头提示

function renderHeader1(h, params) {

// console.log('h', h)

// console.log('params', params)

return h('tooltip',

{

props: {

transfer: true,

placement: 'bottom-end'//下右

}

},

[

//h('span', '优势度'),

h('span', params.column.title),

h('div',

{

'class': {

'custom-tooltip-content': true

},

slot: 'content'

},

[

h('p', '物种所占优势程度，由物种密度和采样点出现的频次计算所得。')

]

)

]

)

}

//简单使用举例

{

title: '优势度',

key: 'DominanceDegree1',

minWidth: 60,

align: "center",

render: renderCell

renderHeader: renderHeader1,

},

renderHeader1方法 加以改造也可以成为批量标题提示方法。

四、完整代码

@{

ViewBag.Title = "";

Layout = "~/Views/Shared/_LayoutNotFooter.cshtml";

}

.table-header-titleThree {

color: #333;

font-style: normal;

font-weight: bolder;

font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",

"Microsoft YaHei", "微软雅黑", Arial, sans-serif;

font-size: 20px;

text-align: center;

vertical-align: auto;

line-height: 1.5;

width: auto;

height: auto;

margin-bottom: 0px;

}

/*custom-tooltip 宽度*/

.ivu-tooltip-inner {

max-width: 600px;

}

.custom-tooltip-content {

white-space: normal;

width: 500px;

}

.custom-tooltip-content p {

text-indent: 2em;

font-size: 14px;

text-align: justify;

}

/*调整table cell间隔和行高*/

.ivu-table-cell {

padding-left: 1px;

padding-right: 1px;

}

.ivu-table-small td {

height: 36px;

}

/*echarts 数据视图 单位样式*/

.echart-table-uint{

font-size: 12px;

color: #515a6e;

float: right;

line-height: 23px;

padding: 4px 0px;

}

/*echarts 数据视图 表格样式*/

.echart-table{

width: 100%;

text-align: center;

border: 1px solid #dddddd;

border-collapse: collapse;

border-spacing: 0;

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

font-size: 12px;

color: #515a6e;

}

.echart-table tr td{

padding: 4px 0;

border: 1px solid #dddddd;

line-height: 23px;

}

.echart-table tr:nth-child(odd) td{

background-color: #FAFAFA;

}

filterable

placeholder="请选择批次"

style="width:150px;">

v-bind:key="item.value"

v-bind:label="item.text"

v-bind:value="item.value" />

v-bind:key="item.id"

v-bind:label="item.name"

v-bind:value="item.id" />

{ { getNameByID(listQuery.riverOrReservoirID,waterList)}}深圳市水生态健康综合评价

{ { getNameByID(listQuery.riverOrReservoirID,waterList)}}深圳市水生态健康评价分项指标表

{ { getNameByID(listQuery.riverOrReservoirID,waterList)}}深圳市水生态健康评价分项指标箱型图

var nameList = ['VelocityOrDepthCombinationCharacteristics', 'WaterQuantityConditions', 'BottomQuality', 'DegreeRiverBend', 'ChangeRiverBend', 'StabilityOfRiverOrLakeBank', 'HabitatComplexity', 'WidthOfRiparianBufferZone', 'HabitatTypeOfRiparianBufferZone', 'VegetationDiversityOfRiparianZone', 'RiparianZoneUseType', 'DissolvedOxygen', 'TotalNitrogen', 'NH3N', 'TP', 'AlgaShannonWiener', 'AlgaBergerParker', 'ZoobenthosShannonWeiner', 'EPT', 'OligochaetaPercent', 'BiologicalInvasion', 'InterferenceIntensityOfRiverBody']

var chineseNameList = ['流速/水深结合特性', '水量状况', '底质', '河道弯曲程度', '河道改变程度', '河岸稳定性', '栖境复杂性', '河岸带缓冲区宽度', '河岸带缓冲区生境类型', '河岸带植被多样性', '河岸带土壤利用类型', '溶解氧(mg/L)', '总氮(mg/L)', 'NH3-N(mg/L)', 'TP(mg/L)', '藻类生物多样性指数', '藻类优势度指数', '大型底栖动物生物多样性指数', 'EPT分类单元数', '寡毛类比例', '生物入侵干扰', '河体干扰强度']

var habitatScoreArr = [];

function getTableColumns() {

var arr = [];

var obj0= {

title: '名称',

key: 'PointBatchIDLeftName',

minWidth: 70,

align: "center",

}

arr.push(obj0);

for (let j = 0; j < nameList.length; j++) {

let obj1 ={

title: chineseNameList[j],

key: nameList[j],

minWidth: chineseNameList[j].length*17,

align: "center",

render: renderCell

//render: function (h, params) {

// return formatTwoDecimalPlaces(params.row[nameList[j]]);

//},

}

arr.push(obj1);

}

/*

, 'RiverSum', 'RiverGrade'

,'综合评分','等级'

*/

var obj2 = {

title: '综合评分',

key: 'RiverSum',

minWidth: 70,

align: "center",

render: function (h, params) {

return formatTwoDecimalPlaces(params.row.RiverSum);

},

}