element vue 获取select 的label_Vue + Flask 小知识（一）

微信公众号：萝卜大杂烩
关注可了解更多的原创内容。问题或建议，请公众号留言或加本人微信;如果你觉得文章对你有帮助，欢迎加微信交流

今天继续分享 Vue.js 学习笔记，上传文件，并显示在下拉框列表中。

前面基础的如何使用 Flask + VUE 搭建环境等知识，可以戳这里查看。

下面我们直接进入主题

显示本地文件

首先，我们要有一个后台接口，来获取到指定目录下的文件。例如如果我们想获取目录下的 xlsx 文件，那么可以编写代码如下：

class FileListView(Resource):
    def get(self):
        files = os.listdir(PY_DIR)
        file_list = []
        i = 0
        for f in files:
            file_dict = {}
            if f[-4:] == 'xlsx':
                file_dict["value"] = i
                file_dict["label"] = f
                file_list.append(file_dict)
                i += 1

        return {'code': 200, 'data': file_list}

api_data.add_resource(FileListView, '/filelist')

使用 flask_restful 来驱动，并封装数据成 {“value”：“”， “label”：“”} 的形式，用于 VUE 前台渲染时使用。

接下来，我们在前端代码中，创建一个 index.vue 文件，添加一个下拉框控件

<template>
    <div>
  <el-select id="file" v-model='fname' filterable placeholder="选择已有" v-on:focus="getData()">
    <el-optionv-for="item in files":key="item.value":label="item.label":value="item.label">
    el-option>
  el-select>
    <input type="hidden" name="middata" id="middata">
    div>
template>

我们加了一个 select 组件，并使用 element UI 官方的方法来渲染数据，即：
     v-for="item in files"
     :key="item.value"
     :label="item.label"
     :value="item.label"
机智的你可能注意到了 v-on:focus="getData()"，这个是当输入下拉框组件获取焦点时，会再次调用 getData 函数，用来更新数据。

下面我们再看下 script 部分