网站进一步搭建（三）2021-07-04_本地网页搭建2021-优快云博客

本文链接：https://blog.youkuaiyun.com/MadChiang/article/details/118459710

这个博客展示了如何在Vue.js应用中创建一个股票数据选择组件，该组件包括股票列表和加载数据功能。用户可以选择股票并在点击加载数据按钮后触发数据加载操作，虽然具体的股票数据可视化部分还未实现，但已为图表展示和控制台区域预留了位置。代码中定义了一个表格，显示了多支股票的代码和名称，并提供了选中和取消选中股票的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

股票数据选择

在股票数据指标可视化的时候需要选择一支股票并加载数据

红框内容
实现代码


<template>
  <div>
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50px">
    </el-table-column>
    <el-table-column
      property="code"
      label="代号"
      width="100px">
    </el-table-column>
    <el-table-column
      property="name"
      label="简称"
      width="200px">
    </el-table-column>

  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="load">加载数据</el-button>
    <el-button @click="setCurrent()">取消选中</el-button>
  </div>

  </div>
</template>


<script>
  export default {
    name:'stocks',
    data() {
      return {
        tableData: [
          {
          code: '600519',
          name: '贵州茅台',

        },
          {
          code: '601398',
          name: '工商银行',

        },
          {
          code: '600036',
          name: '招商银行',

        },
          {
          code: '601288',
          name: '农业银行',

      },
          {
          code: '601288',
            name: '农业银行',

          }
          ,
          {
            code: '601288',
            name: '农业银行',

          }
          ,
          {
            code: '601288',
            name: '农业银行',

          },
          {
            code: '601288',
            name: '农业银行',

          }

      ],
        currentRow: null
      }
    },

    methods: {
      load(){

      }
      ,
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      }
      ,
      handleCurrentChange(val) {
        this.currentRow = val;
      }
    }
  }
</script>

<style>

</style>

这里留有一个加载数据的接口待实现

股票数据（指标）可视化

股票数据可视化部分分为图标展示区域和控制台区域
下图中的绿色和蓝色部分，留待实现
在这里插入图片描述