【element-ui】element-ui获取表格下拉框选中的值？

Z时代
2024-01-10
分类：技术分享

请问点击批量修改按钮怎么获取element-ui表格里面下拉框选中的值啊，已经试了很久了还是没办法，求解图片描述

回答：

运行，看效果

<template>
  <div>
    <el-table
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.name">
            <el-option
              label="小明"
              value="xm"
            ></el-option>
            <el-option
              label="小红"
              value="xh"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
      >
      </el-table-column>
    </el-table>
    <el-button @click="getData">批量修改</el-button>
  </div>
</template>
<script>
// import { log } from 'util';
export default {
  name: 'App',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'xm',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: 'xh',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    getData () {
    },
    handleSelectionChange (val) {
      let tempArr = []
      val.forEach(element => {
        tempArr.push(element.name)
      });
      console.log(tempArr);
    }
  }
}
</script>
<style>
</style>