基于ele封装下拉菜单等组件

最新推荐文章于 2024-05-23 10:47:53 发布
最新推荐文章于 2024-05-23 10:47:53 发布
阅读量922 收藏 3
点赞数 2
分类专栏： vue 后台组件 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/119890681
版权

目录

基于ele封装下拉菜单等组件方式1

下拉菜单组件SelectCom.vue

在这里插入图片描述

SelectCom.vue
<template>
  <div class="xSelect_container">
    <span :style="`width: ${labelWidth}`" class="xSelect_label">
      <span class="label_title"> {{ title }} ： </span>
    </span>
    <div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
      <el-select
        class="search-select"
        v-model="value"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
/**
 * 属性介绍
 * * title 左侧标题 ；labelWidth 左侧标题宽度； options：数据（数组形式）；
 * * ref="SelectComTest" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SelectComTest.value = "";
 * * 至于其他属性，则是按照slect原本的自带的属性进行传递
 * 使用例子
 * <SelectCom
    :title="'合作公司'"
    :labelWidth="'95px'"
    :options="options"
    @change="changeVal"
    ref="SelectComTest"
    disabled
  />
 */
export default {
  name: "SelectCom",
  components: {},
  props: {
    options: {
      type: Array,
      default() {
        return [];
      },
    },
    title: {
      type: String,
      default: "活动名称",
    },
    labelWidth: {
      type: String,
      default: "95px",
    },
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
.xSelect_container {
  line-height: 32px;
  height: 32px;
  clear: both;
  .xSelect_label {
    float: left;
  }
  .xSelect_con {
    float: left;
  }
}
// .search-select下拉选择样式名称
.search-select {
  width: 100%;
}
.search-select ::v-deep .el-input__suffix {
  right: 10px;
}

.search-select ::v-deep .el-select .el-input .el-select__caret {
  line-height: 32px;
}

.search-select ::v-deep .el-input__inner {
  height: 32px;
}

::v-deep .el-input__icon {
  line-height: 25px;
}
</style>
使用下拉组件
<div class="seach-single">
  <SelectCom
    :title="'合作公司'"
    :labelWidth="'95px'"
    :options="options"
    @change="changeVal"
    ref="SelectComTest"
    disabled
  />
</div>
<div class="seach-single">
  <SelectCom
    :title="'合作货币'"
    :labelWidth="'95px'"
    :options="options2"
    @change="changeVal2"
    ref="SelectComTest2"
  />
</div>
import SelectCom from "./SelectCom.vue";
export default {
  name: "XXX",
  components: {
    SelectCom,
  },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "菜鸡1",
        },
        {
          value: "2",
          label: "菜鸡2",
        },
      ],
      options2: [
        {
          value: "1",
          label: "混子1",
        },
        {
          value: "2",
          label: "混子2",
        },
      ],
    };
  },
  // 回显数据
  init(){
 	this.$refs.SelectComTest.value = 0;
 },
  changeVal(val) {
    console.log("val", val);
  },
  changeVal2(val) {
    console.log("changeVal2", val);
  },
  // 重置
  resetForm() {
    this.$refs.SelectComTest.value = "";
    this.$refs.SelectComTest2.value = "";
  },

单独一个日期选择组件

在这里插入图片描述

SingleData.vue
<!-- 单选日期等 -->
<template>
  <div class="xSelect_container">
    <span :style="`width: ${labelWidth}`" class="xSelect_label">
      <span class="label_title"> {{ title }} ： </span>
    </span>
    <div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
      <el-date-picker
        class="single-date-picker"
        style="height: '32px'"
        v-model="value"
        value-format="yyyy-MM-dd"
        v-bind="$attrs"
        v-on="$listeners"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
/**
 * 属性介绍
 * * title 左侧标题 ；labelWidth 左侧标题宽度；
 * * ref="SelectComTest" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SelectComTest.value = "";
 * * 至于其他属性，则是按照原本的自带的属性进行传递
 * 使用例子
  <SingleData
    :title="'还款日期'"
    @change="SingleDataChange"
    ref="SingleDataTest1"
    type="date"
  />
 */
export default {
  name: "SingleData",
  components: {},
  props: {
    title: {
      type: String,
      default: "活动名称",
    },
    labelWidth: {
      type: String,
      default: "95px",
    },
  },
  data() {
    return {
      value: "",
    };
  },
};
</script>
<style  lang="scss" scoped>
.xSelect_container {
  line-height: 32px;
  height: 32px;
  clear: both;
  .xSelect_label {
    float: left;
  }
  .xSelect_con {
    float: left;
  }
}
// 单个日期选择器 single-date-picker
.single-date-picker {
  width: 100%;
}
</style>
使用该组件
        <div class="seach-single">
          <SingleData
            :title="'还款日期'"
            @change="SingleDataChange"
            ref="SingleDataTest1"
            type="date"
          />
        </div>
        <div class="seach-single">
          <SingleData
            :title="'退款日期'"
            @change="SingleDataChange2"
            ref="SingleDataTest2"
            type="month"
          />
        </div>

    SingleDataChange(val){
      console.log("SingleDataChange", val);
    },
    SingleDataChange2(val){
      console.log("SingleDataChange2", val);
    },
    // 重置
    resetForm() {
      this.$refs.SingleDataTest1.value = "";
      this.$refs.SingleDataTest2.value = "";
    },

双日期选择组件

在这里插入图片描述

DoubleData.vue
<template>
  <div class="xSelect_container">
    <span :style="`width: ${labelWidth}`" class="xSelect_label">
      <span class="label_title"> {{ title }} ： </span>
    </span>
    <div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
      <el-date-picker
        v-model="value"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        v-bind="$attrs"
        v-on="$listeners"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
/**
 * 属性介绍
 * * title 左侧标题 ；labelWidth 左侧标题宽度； options：数据（数组形式）；
 * * ref="SelectComTest" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SelectComTest.value = "";
 * * 至于其他属性，则是按照slect原本的自带的属性进行传递
 * 使用例子
 * <DoubleData
    :title="'货币日期'"
    @change="DoubleDataChange"
    ref="SelectComTest"
    disabled
  />
 */
export default {
  name: "DoubleData",
  components: {},
  props: {
    title: {
      type: String,
      default: "活动名称",
    },
    labelWidth: {
      type: String,
      default: "95px",
    },
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
.xSelect_container {
  line-height: 32px;
  height: 32px;
  clear: both;
  .xSelect_label {
    float: left;
  }
  .xSelect_con {
    float: left;
    overflow: hidden;
    line-height: 32px;
    height: 32px;
    border: 1px solid #dcdfe6;
  }
}
// 日期选择样式名称
::v-deep .el-input__inner {
  width: 100%;
}

::v-deep .el-date-editor {
  padding: 0 1px;
  width: 100%;
  border: none;
}
::v-deep .el-range-input {
  width: 40%;
  font-size: 12px;
  margin-top: -5px;
}
::v-deep .el-range-separator {
  width: 8%;
  padding: 0;
  font-size: 12px;
  line-height: 34px;
}
::v-deep .el-range__icon {
  margin-top: -3px;
}
</style>
使用组件
        <div class="seach-single">
          <DoubleData
            :title="'货币日期'"
            @change="DoubleDataChange"
            ref="DoubleDataTest"
          />
        </div>
        <div class="seach-single">
          <DoubleData
            :title="'货币日期2'"
            @change="DoubleDataChange2"
            ref="DoubleDataTest2"
          />
        </div>

    DoubleDataChange(val){
      console.log("DoubleDataChange",val);
    },
    DoubleDataChange2(val){
      console.log("DoubleDataChange2",val);
    },
    // 重置
    resetForm() {
      this.$refs.DoubleDataTest.value = "";
      this.$refs.DoubleDataTest2.value = "";
    },

单个输入框组件

在这里插入图片描述

SingleInput.vue
<template>
  <div class="xSelect_container">
    <span :style="`width: ${labelWidth}`" class="xSelect_label">
      <span class="label_title"> {{ title }} ： </span>
    </span>
    <div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
      <el-input
        v-model="value"
        v-bind="$attrs"
        v-on="$listeners"
        placeholder="请输入"
      ></el-input>
    </div>
  </div>
</template>

<script>
/**
 * 属性介绍
 * * title 左侧标题 ；labelWidth 左侧标题宽度； propsValue：需要回显的值；
 * * ref="SingleInputInput2" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.SingleInputInput2.value = "";
 * * 至于其他属性，则是按照slect原本的自带的属性进行传递
 * 使用例子
 * <SingleInput
    :title="'申请编号2'"
    ref="SingleInputTest2"
    v-debounce="SingleInputInput2"
  />
 */
export default {
  name: "SingleInput",
  props: {
    propsValue: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "活动名称",
    },
    labelWidth: {
      type: String,
      default: "95px",
    },
  },
  components: {},
  data() {
    return {
      value: this.propsValue,
    };
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
.xSelect_container {
  line-height: 32px;
  height: 32px;
  clear: both;
  .xSelect_label {
    float: left;
  }
  .xSelect_con {
    float: left;
  }
}
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>
使用组件
        <div class="seach-single">
          <SingleInput
            :title="'申请编号'"
            propsValue="112233"
            ref="SingleInputTest"
            v-debounce="SingleInputInput"
          />
        </div>
        <div class="seach-single">
          <SingleInput
            :title="'申请编号2'"
            ref="SingleInputTest2"
            v-debounce="SingleInputInput2"
          />
        </div>

    SingleInputInput(){
      console.log("SingleInputTest", this.$refs.SingleInputTest.value);
    },
    SingleInputInput2(){
      console.log("SingleInputTest2", this.$refs.SingleInputTest2.value);
    },
    // 重置
    resetForm() {
      this.$refs.SingleInputTest2.value = "";
      this.$refs.SingleInputTest.value = "";
    },
防抖指令
1: directive 文件夹下 debounce.js
import Vue from 'vue';

Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer;
    el.addEventListener("input", () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        // 关键点：vue的自定义指令传递的参数binding如果是一个函数，则通过binding.value()来执行
        binding.value();
      }, 500)
    })
  }
});

2:main.js
import "@/directive/debounce.js"
3：使用  v-debounce="SingleInputInput2" 该事件的值，需要使用ref方式拿到

双input组件

在这里插入图片描述

DoubleInput.vue
<template>
  <div class="xSelect_container">
    <span :style="`width: ${labelWidth}`" class="xSelect_label">
      <span class="label_title"> {{ title }} ： </span>
    </span>
    <div class="xSelect_con" :style="`width: calc(100% - ${labelWidth})`">
      <el-input
        class="input"
        v-model="value1"
        @change="inputbefore"
        placeholder="请输入"
        type="number"
      ></el-input>
      <div class="interval">~</div>
      <el-input
        class="input input2"
        v-model="value2"
        @change="inputAfter"
        placeholder="请输入"
        type="number"
      ></el-input>
    </div>
  </div>
</template>

<script>
/**
 * 属性介绍
 * * title 左侧标题 ；labelWidth 左侧标题宽度； options：数据（数组形式）；
 * * ref="DoubleInputTest2" 定义未了在父组件之中清空子组件的选中的值 =》 this.$refs.DoubleInputTest2.value1 / value2 = "";
 * * 至于其他属性，则是按照slect原本的自带的属性进行传递
 * * 事件 inputbefore  与 inputAfter 两个输入框事件
 * 使用例子
  <DoubleInput
    :title="'财资处2'"
    ref="DoubleInputTest2"
    @inputbefore="inputbefore2"
    @inputAfter="inputAfter2"
  />
 */
export default {
  name: "DoubleInput",
  props: {
    propsValue: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "活动名称",
    },
    labelWidth: {
      type: String,
      default: "95px",
    },
  },
  components: {},
  data() {
    return {
      value1: "",
      value2: "",
    };
  },
  methods: {
    inputbefore() {
      this.$emit("inputbefore", this.value1);
    },
    inputAfter() {
      this.$emit("inputAfter", this.value2);
    },
  },
};
</script>
<style  lang="scss" scoped>
.xSelect_container {
  line-height: 32px;
  height: 32px;
  clear: both;
  .xSelect_label {
    float: left;
  }
  .xSelect_con {
    float: left;
  }
}
.xSelect_con {
  position: relative;
  line-height: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid #dcdfe6;
  & > .input {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
    width: 45%;
  }
  & > .input {
    float: left;
  }
  & > .input2 {
    float: right;
  }
  & > .interval {
    z-index: 10;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    line-height: 10px;
    color: #c0c4cc;
  }
}
::-webkit-input-placeholder {
  color: #c0c4cc;
}
::v-deep .el-input__inner {
  text-align: center;
  height: 30px;
  border: none;
  font-size: 12px;
  padding: 0;
  margin: 0;
}
</style>
使用组件
        <div class="seach-single">
          <DoubleInput
            :title="'财资处'"
            ref="DoubleInputTest"
            @inputbefore="inputbefore1"
            @inputAfter="inputAfter1"
          />
        </div>
        <div class="seach-single">
          <DoubleInput
            :title="'财资处2'"
            ref="DoubleInputTest2"
            @inputbefore="inputbefore2"
            @inputAfter="inputAfter2"
          />
        </div>

    inputbefore1(val) {
      console.log("inputbefore1", val);
    },
    inputAfter1(val) {
      console.log("inputAfter1", val);
    },
    inputbefore2(val) {
      console.log("inputbefore2", val);
    },
    inputAfter2(val) {
      console.log("inputAfter2", val);
    },
    // 重置
    resetForm() {
      this.$refs.DoubleInputTest.value1 = "";
      this.$refs.DoubleInputTest.value2 = "";
      this.$refs.DoubleInputTest2.value1 = "";
      this.$refs.DoubleInputTest2.value2 = "";
   }

基于ele封装下拉菜单等组件 方式2

在这里插入图片描述

singleSearch组件

<template>
  <div class="single-search clear_fix">
    <div class="xSelect_wrap" :style="`width: calc(100% - ${labelWidth})`">
      <slot></slot>
    </div>
    <span :style="`width: ${labelWidth}`" class="xSelect_label">
      <span class="label_title"> {{ title }} ： </span>
    </span>
  </div>
</template>
<script>
/**
 * singleSearch
 *
 * @module components/singleSearch
 * @desc 下拉菜单等组件
 * @param labelWidth {String} - label宽度
 * @param title {String} - label名称
 * @param 传入的组件需要加上以下类名：
 * @param search-input  输入筐样式名称覆盖
 * @param date-picker  日期选择样式名称
 * @param search-select  下拉选择样式名称
 * @param 使用示例
 *       <single-search :labelWidth="'95px'" >
            <el-input
                class="search-input"
                ref="input"
                placeholder="请输入"
                v-model="value"
                :disabled="isDisabled"
            ></el-input>
        </single-search>
 *
*/
export default {
  name: "singleSearch",
  props: {
    labelWidth: {
      type: String,
      default: "94px",
    },
    title: {
      type: String,
      default: "活动名称",
    },
  },
  data() {
    return {};
  },
};
</script>
<style  lang="scss" scoped>
.single-search {
  width: 100%;
  .xSelect_wrap {
    line-height: 32px;
    height: 32px;
  }
}
</style>

使用组件

          <single-search :labelWidth="'95px'" :title="'险种'">
            <el-select class="search-select" v-model="select2.value" @change="itemchange">
              <el-option
                v-for="item in select2.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </single-search>

<style  lang="scss" scoped>
@import "@/assets/css/eleInput.scss";
</style>
样式
  // 输入筐样式名称覆盖
  ::v-deep .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
  // 日期选择样式名称
  ::v-deep .el-input__inner{
    width: 100%;
  }
  .date-picker .el-range-editor.el-input__inner{
    height: 32px;
    line-height: 32px;
    
  }
  .date-picker .el-range__close-icon{
    line-height: 25px;
  }
  .date-picker .el-date-editor {
    padding: 0 1px;
    width: 100%;
    border: none;
  }
  .date-picker .el-range-input {
    width: 40%;
    font-size: 12px;
  }
  .date-picker .el-range-separator {
    width: 8%;
    padding: 0;
    font-size: 12px;
    line-height: 25px;
  }
  .date-picker .el-range__icon {
    margin-top: -8px;
  }
  ::v-deep .el-date-editor .el-range-separator{
    line-height: 25px;
  }
  // .search-select下拉选择样式名称
  .search-select {
    width: 100%;
  }
  .search-select  ::v-deep .el-input__suffix{
    right: 10px;
  }
  .search-select ::v-deep .el-select .el-input .el-select__caret{
    line-height: 32px;
  }
  .search-select ::v-deep .el-input__inner {
    height: 32px;
  }
  ::v-deep .el-input__icon {
    line-height: 25px;
  }
  // 单个日期选择器 single-date-picker
  .single-date-picker {
    width: 100%;
  }

  // 双input的
  .double-input-wrap {
    width: 100%;
    border: 1px solid #DCDFE6;
    overflow: hidden;
    clear: both;
  }
  .double-input {
    width: 45%;
    height: 30px;
    line-height: 30px;

    ::v-deep .el-input__inner {
      border: none !important;
    }
    .double-input:nth-child(1) {
      float: left;
    }
    span {
      float: left;
      width: 10%;
      text-align: center;
    }
    .double-input:nth-child(2) {
      float: left;
    }
  }

使用组件 单个日期与两个输入框

在这里插入图片描述

        <div class="seach-single">
          <single-search :labelWidth="'95px'" :title="'日期'">
            <el-date-picker
              class="single-date-picker"
              v-model="value1"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </single-search>
        </div>
        <div class="seach-single">
          <single-search :labelWidth="'95px'" :title="'金额'">
            <div class="double-input-wrap">
              <el-input
                class="double-input"
                v-model="input1"
                placeholder="请输入"
                @change="inputchange1"
              ></el-input>
              <span>至</span>
              <el-input
                class="double-input"
                v-model="input2"
                placeholder="请输入"
              ></el-input>
            </div>
          </single-search>
        </div>
小小liang
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于element组件库封装的动态表单组件
07-15
"基于element组件库封装的动态表单组件"就是这样一个解决方案，它针对Vue3进行了优化，旨在帮助开发者更方便地创建和管理动态表单。 动态表单是一种能够根据数据结构自动生成表单的组件，通常用于处理复杂的表单...
javascript 输入框 输入时进行下拉提示
wccmfc123的专栏
01-30 942
InputPrompt.js //输入时自动下拉提示 function InputPrompt(arg){ this.items=arg.items||undefined;//下拉项目 this.container=null; this.input=arg.input||undefined; this.text=''; this.preLength=0;//文本上一次长度 this.h
自定义下拉列表
qq_43615903的博客
04-14 238
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
Element的$prompt方法的使用及自定义显示内容
最新发布
Y1436314328的博客
05-23 662
$prompt内容自定义添加表单校验
输入框弹框 $prompt
coldriversnow的专栏
10-13 2998
this.$prompt( '请输入文件夹名称：', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputValue: '输入框默认值', inputErr...
element-ui $prompt输入弹框
Mrdwc的博客
08-11 1840
看了官方文档示例，想着是不是inputValue: this.email的问题，把该行代码注释掉，发现就不存在之前的问题了；最后发现是关于this.email初始值为空字符串而不是null导致首次打开$prompt输入框触发校验部分；记录开发过程中遇到的一些问题，希望可以帮到遇到同样问题的小伙伴。但是会出现首次打开就会出现errorMessage提示，
js 弹出一个选择下拉框
程序媛菜鸟
08-07 1万+
代码来自赖人建站，修改了部分js html   jQuery的各种提示框参考 - 懒人建站 $(document).ready( function() { $("#prompt_button").click( function() { jSelect('请选择:',{'1':'张三','2':'李四'}, '人物', function(inputdata) { alert
实现输入框与下拉框互相转换
weixin_64974855的博客
04-16 311
实现输入框与下拉框互相转换
ele-tree-select:基于elementUI的下拉树插件
05-13
此插件是基于elementUI开发的下拉树组件 目前不支持单选,暂只支持多选 安装 npm i ele-tree-select -S 使用 在 main.js 中引入 import EleTreeSelect from 'ele-tree-select' import 'ele-tree-select/lib/ele-tree-...
基于Web标准的UI组件 — 树状菜单(2)
12-07
从这篇开始，你需要拥有一些Javascript和DOM相关的知识才能顺利地学习下去。由于Javascript和DOM都不是三言两语可以说完的东西，如果你对它们还不...　此方法有两个参数：ele指出以哪个DOM节点为根节点寻找（也就是说只
vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
04-19
vue3-pro-table之前有一个是基于 vue2 开发的vue3-pro-table 是基于 vue3 开发一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件特性将搜索、列表、分页三者的交互...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
总的来说，Element-UI的NavMenu组件提供了一套完整的导航菜单解决方案，包括菜单项、子菜单、分组、自定义内容和事件处理等功能，可以帮助开发者快速构建出美观且功能完善的导航系统。通过灵活组合和配置，可以满足...
vue+element ui实现输入框手动输入以及下拉框选择
m0_63006013的博客
09-23 4867
【代码】vue+element ui实现输入框手动输入以及下拉框选择。
【动态表单，动态新增输入框，下拉框】
huangjinsheng1988的专栏
01-15 1124
<template> <div id="detail"> <DetailNavbar /> <div class="app-container"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="接口" name="interface">接口</el-tab-pane&g...
在el-select下拉框内实现增删改查
luckycoming的博客
08-09 1776
查询就更简单了，直接在el-select标签中设置 filterable属性即可；如果想要更复杂的远程搜索效果，请移步element-ui官网。效果：在下拉框内就可以实现增删改查效果，不需要另外建立表格；1、编辑按钮和删除按钮都是写在下拉框内容里，设置了向右浮动。1、在下拉框显示的时候，会触发生成新增按钮标签事件；2、点击新增按钮会弹出可输入弹框 ,确定后会提交内容。至于删除就是获取到要操作的那一列数据，删除即可。2、点击编辑时获取点击的那一列数据，然后修改。废话不多说，直接上效果和代码。
vue的select选择框的小技巧
weixin_47035997的博客
10-26 272
vue的select的用法记录
element-ui下拉框添加添加数据按钮（自用）
chj_2020的博客
02-01 4774
<el-select v-model="form.labels" multiple :placeholder="$t('goods.qxz_content')" ref="template" @visible-change="(v) => visibleChange(v, 'template')" > <el-option v-for="(item, index) in labe...
elementUI-MessageBox 弹框之$prompt
若末lan的博客
05-16 4754
输入框的类型 默认text, 文档比较简洁没有列举其他的type，其实input的type有很多，比如file，date，比如这里我写的textarea也是OK的；2.inputValidator 输入框的校验函数。val)return '放弃原因必填'},之前写都没有记录，今天记录一下，文档上没有写的关于$prompt内容提交的校验。
element-ui $prompt输入弹框和$confirm确认弹框用法--输入框默认值、校验、阻止关闭等问题
热门推荐
facing-screen's blog
09-02 4万+
element-ui $prompt输入框弹窗用法 实例： this.$prompt('请输入文件夹名称：','提示',{ confirmButtonText: '确定', cancelButtonText: '取消' }).then(({value}) => { console.log(value); utils.aja
vue 封装elementui step组件
08-25
Vue封装ElementUI的Steps组件的方法有很多种，其中一种常见的方法是使用vue-ele-steps插件对ElementUI中的Steps组件进行进一步封装。这个插件的目的是减少HTML结构的复杂性，同时保留ElementUI Steps组件的所有功能。 另外一种方法是通过安装babel-plugin-component插件来按需导入和打包ElementUI中的组件。首先，需要安装ElementUI，然后使用npm install babel-plugin-component -D来安装babel-plugin-component插件。接着，在babel.config.js中配置插件，指定需要按需加载的组件。这样在打包时，只会将使用到的组件打包到项目中，从而减小项目体积并提高访问速度。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vueelesteps让elementuisteps更简单](https://download.csdn.net/download/weixin_39840387/11516581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue--ElementUI组件库](https://blog.csdn.net/weixin_43285360/article/details/120311866)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值