下拉表格 element-ui

三155

已于 2022-06-16 11:26:01 修改

阅读量444

点赞数

文章标签： javascript vue.js 前端

于 2022-06-16 11:20:54 首次发布

本文链接：https://blog.csdn.net/Beloved_Jodie/article/details/125312174

版权

本文介绍如何利用Element-UI组件库中的el-select和el-table结合，创建一个多选下拉表格功能。通过表格展示选项，并提供分页功能，同时实现了选择项的确认和取消操作，确保了选中数据的实时更新。

摘要由CSDN通过智能技术生成

下拉表格 element-ui

在这里插入图片描述

<template>
	<div>
      <el-select v-model="value1" ref="selectTable" multiple placeholder="请选择">
       // <!-- <el-option
       //   v-for="item in options"
       //   :key="item.value"
       //   :label="item.label"
       //   :value="item.value"
       // >
       // </el-option>
       // <slot>123</slot> -->
       //  插槽 slot="empty"
        <template slot="empty">
          <div style="padding: 5px 10px">
            <el-table
              :data="options"
              min-width="150"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center">
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                property="label"
                label="日期"
              ></el-table-column>
              <el-table-column
                align="center"
                width="100"
                property="label"
                label="姓名"
              ></el-table-column>
            </el-table>
            // 分页事件按需添加
            <el-pagination
              style="float: right"
              small
              layout="total, prev, pager, next"
              :total="50"
            >
            </el-pagination>
            <div style="clear: both"></div>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="popoverTable('off')"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="popoverTable('ok')"
                >确定</el-button
              >
            </div>
          </div>
        </template>
      </el-select>
      <el-button @click="add">确定</el-button>
	</div>
</template>
<script>
export default {
  data () {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value1: [],
    }
  },
  methods: {
    // 下拉表格 多选框
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 表格按钮  确定/取消
    popoverTable (val) {
    //  点击取消按钮 关闭表格弹窗 this.$refs.selectTable.blur() 
      if (val === 'off') return this.$refs.selectTable.blur()
      // 点击确定按钮 关闭表格弹窗
      this.$refs.selectTable.blur()
      console.log(this.$refs.selectTable.value, this.multipleSelection)
      // 处理选中数据 
      // 当已选中的为0  /  为 undefined 时 正常添加
      // 否则 已有数据时 判断当前选中数据 是否已被选中 未选中则添加
      if (this.$refs.selectTable.value.length === 0 || this.$refs.selectTable.value.length === undefined) {
        this.multipleSelection.map(item => {
          console.log(item.label)
          this.$refs.selectTable.value.push(item.label)
        })
      } else {
        this.multipleSelection.map(item => {
          console.log(this.$refs.selectTable.value.indexOf(item.label))
          if (this.$refs.selectTable.value.indexOf(item.label) === -1) {
            this.$refs.selectTable.value.push(item.label)
          }
        })
      }
      // console.log(this.value1)
      // console.log(this.$refs.selectTable)
      // 强制渲染 避免选中数据不能实时更新到页面
      this.$forceUpdate()
    },
  }
}