vue锚点定位案例

<!--健康记录-->
<template>
	<div id="healthRecord">
		<hc-tabs tab-position="left" v-model="tabActive" @tab-click="tabHandleClick" style="height:200px;width:90px;">
			<el-tab-pane label="体重" name="weight"> </el-tab-pane>
			<el-tab-pane label="步数" name="step"> </el-tab-pane>
			<el-tab-pane label="运动" name="sport"> </el-tab-pane>
			<el-tab-pane label="饮食" name="eat"> </el-tab-pane>
			<!--<el-tab-pane label="饮食" name="food"> </el-tab-pane>-->
		</hc-tabs>
		<div class="record_main" ref="record_main">
			<div class="record_weight_main record_main_content" id="weight">
				<div class="record_title">
					<div class="record_title_left">
						<span class="title">体重记录 （KG）</span>
						<!--<span v-if="weightData.length===0">暂无数据，客户未进行体重记录</span>-->
						<span>连续体重打卡{
  {weightDays}}天</span>
					</div>
					<div class="record_title_right">
						<hc-date-range v-model="weight_RangeValue" :clearField="clearField" class="hc-date-range" :pickerOptionsBegin="pickerOptionsBegin" :pickerOptionsEnd="pickerOptionsEnd"></hc-date-range>
						<hc-button @click="weightSearch" size="mini" class="searchBtn">查询</hc-button>
						<hc-button @click="weightToChart" size="mini" class="change-btn">{
  { weightChartFlag ? "折线图" : "列 表" }}
						</hc-button>
					</div>
				</div>
				<div v-show="weightChartFlag">
					<hc-table :data="weightData" border fit size="small" v-if="weightData.length>0">
						<hc-table-column type="index" label="序号" width="60"></hc-table-column>
						<hc-table-column prop="content" label="体重（kg）" width="120"></hc-table-column>
						<hc-table-column prop="ordDate" label="记录时间" width="150"></hc-table-column>
						<hc-table-column prop="userRemark" label="客户备注" min-width="150"></hc-table-column>
						<hc-table-column prop="dataSourceName" label="数据来源" min-width="100"></hc-table-column>
					</hc-t