拿element里面的下拉框value和label

最新推荐文章于 2023-12-07 16:17:09 发布

抑制、

最新推荐文章于 2023-12-07 16:17:09 发布

阅读量1.8k

点赞数

分类专栏： element 文章标签：拿element里面的下拉框value和label

本文链接：https://blog.csdn.net/qq_43486347/article/details/103137444

版权

element 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

拿element里面的下拉框value和label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app">
        <div style="margin: 0 auto; width: 700px;">
            <!-- <el-input v-model="input" placeholder="请输入内容" style="width: 300px;"></el-input>
            <el-button @click="mck">查询</el-button> -->
            <el-select v-model="value" placeholder="请选择" @change="changeValue">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.id">
                </el-option>
            </el-select>  
        </div>
        <el-table :data="tableData" style="width: 750px; margin: 0 auto;">
            <el-table-column prop="date" label="日期" width="230"></el-table-column>
            <el-table-column prop="name" label="姓名" width="230"></el-table-column>
            <el-table-column prop="address" label="地址" width="230"></el-table-column>
      </el-table>
    </div>
</body>
<script>
  var app = new Vue({
      el:"#app",
      data(){
          return{
            input: '',
            nameObj: '',
            options: [{
                id: '0',
                label: '黄金糕'
            }, {
                id: '1',
                label: '双皮奶'
            }, {
                id: '2',
                label: '蚵仔煎'
            }, {
                id: '3',
                label: '龙须面'
            }, {
                id: '4',
                label: '北京烤鸭'
            }],
            value: '',
            tableData: [{
                date: '2016-05-02',
                name: '店面',
                address: '上海市普陀区金沙江路 1518 弄'
          }, {
                date: '2016-05-04',
                name: '商家',
                address: '上海市普陀区金沙江路 1517 弄'
          }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
          }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
          }]
            
          }
      },
      methods: {
        //   mck(){
            //   console.log(this.input)
              //模糊搜索
            //   if(this.input){
            //       this.tableData = this.tableData.filter((item)=>{
            //           return item.name.includes(this.input)
            //       })
            //   }
              //精准搜索
            //   if(this.input){
            //       this.tableData = this.tableData.filter((item)=>{
            //           return item.name === this.input
            //       })
            //   }
        //   },
          //拿到element下拉框里面的id和label
          changeValue(val){
              console.log(val)
              var obj = {}
              obj = this.options.find((item)=>{
                  return item.id === val
                // console.log(item)
              })
              this.nameObj = obj.label
              console.log(this.nameObj)
          }
      }
  })
</script>
</html>