Vue 03 -代码片段

1. 导航菜单

<template>
  <div>
    <div id="magicalDragScene" class="mc-root mc-ui-absolute-pane">
      <el-tabs style="width:60%; position: absolute; left: 20%; top: 3.57143%;" value="唐口" @tab-click="_tabClick" @click="request">
        <el-tab-pane v-for="(item) in mineNames" :name="item" :label="item">
          <el-table :data="tableList" :fit="true" :show-header="true">
            <el-table-column prop="name" :label="item"></el-table-column>
            <el-table-column prop="data" label="测点数据"></el-table-column>
            <el-table-column prop="temperature" label="测点温度"></el-table-column>
            <el-table-column prop="state" label="预警状态"></el-table-column>
            <el-table-column prop="time" label="采集时间"></el-table-column>
            <el-table-column prop="real" label="是否最新"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data: function () {
    return {
      mineNames: ["唐口", "新河", "岱庄","巴彦高勒", "双欣", "亭南", "正通", "邵寨"]
    }
  }
}

function request(){
  alert("haha")
}
</script>

<style scoped>

</style>

image.png