增加锚点滚动

src/views/modules/agent/questionnaire/detail.vue

@@ -12,26 +12,20 @@
                 <div class="ct_l">
                     <div class="cl_title">大纲</div>
                     <div class="cl_list">
-                        <div class="cl_item" :class="{'active':qidx===index}" v-for="(item, index) in questionList" :key="index"><span>{{ index+1 }}.</span>{{ item.title||'问题'+(index+1) }}</div>
+                        <div class="cl_item" :class="{'active':qidx===index}" v-for="(item, index) in questionList" :key="index" @click="scrollToSection(index)"><span>{{ index+1 }}.</span>{{ item.title||'问题'+(index+1) }}</div>
                     </div>
                 </div>
                 <div class="ct_r">
                     <div class="cr_title">{{ title }}</div>
                     <div class="cr_type">问卷类型：{{ type }}</div>
                     <div class="cr_list">
-                        <div class="crl_item" v-for="(item, index) in dataList" :key="index">
+                        <div class="crl_item" v-for="(item, index) in dataList" :key="index" :ref="el => { sectionRefs[index] = el }">
                             <div class="ci_title adfac"><span>*</span>{{ (index+1)+'.'+item.question }}</div>
                             <div class="ci_answer adfac" v-for="(answer, idx) in item.questionOption" :key="idx">
                                 <template v-if="item.questionType==='2'">
                                     <img src="@/assets/images/agent/notselect_mini.png">
                                     <span>{{ answer.questionOption }}</span>
                                 </template>
-                                <!-- <el-radio v-model="item.answer" :label="answer.value" style="display: block;margin-top: 26px;">{{ answer.name }}</el-radio> -->
-                                <!-- <div class="ca_czs adfac" style="display: none;">
-                                    <img src="@/assets/images/agent/edit_mini2.png">
-                                    <img src="@/assets/images/agent/add_mini.png">
-                                    <img src="@/assets/images/agent/reduce_mini.png">
-                                </div> -->
                             </div>
                         </div>
                     </div>
@@ -59,44 +53,20 @@
         3: '高级'
     }
     const questionList = ref([])
-    const dataList = ref([
-        {
-            question:'您所在的部门是哪个？',
-            answer:'',
-            answerList:[
-                {name:'A 人力资源部',value:'A 人力资源部'},
-                {name:'B 财务部',value:'B 财务部'},
-                {name:'C 市场部',value:'C 市场部'},
-                {name:'D 技术部',value:'D 技术部'},
-                {name:'E 其他',value:'E 其他'},
-            ]
-        },
-        {
-            question:'您所在的部门是哪个？',
-            answer:'',
-            answerList:[
-                {name:'A 人力资源部',value:'A 人力资源部'},
-                {name:'B 财务部',value:'B 财务部'},
-                {name:'C 市场部',value:'C 市场部'},
-                {name:'D 技术部',value:'D 技术部'},
-                {name:'E 其他',value:'E 其他'},
-            ]
-        },
-        {
-            question:'您所在的部门是哪个？',
-            answer:'',
-            answerList:[
-                {name:'A 人力资源部',value:'A 人力资源部'},
-                {name:'B 财务部',value:'B 财务部'},
-                {name:'C 市场部',value:'C 市场部'},
-                {name:'D 技术部',value:'D 技术部'},
-                {name:'E 其他',value:'E 其他'},
-            ]
-        }
-    ])
+    const dataList = ref([])
     const questionnaireId = ref('')
     const title = ref('')
     const type = ref('')
+    const sectionRefs = ref([]);
+
+    const scrollToSection = (index) => {
+        if (sectionRefs.value[index]) {
+            sectionRefs.value[index].scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    };
 
     const sendWj = () =>{
         proxy.$router.push({path:'/agentQuestionnairePublish',query:{id:questionnaireId.value,title:title.value,type:typecfg[type.value]}});