列表中加，减，上下移操作列

Software攻城狮

已于 2022-07-10 08:48:08 修改

阅读量132

点赞数

分类专栏： Vue2 文章标签：前端

于 2022-07-10 08:47:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43799793/article/details/125642741

版权

Vue2 专栏收录该内容

32 篇文章

订阅专栏

该博客展示了如何在Vue.js应用中实现表格数据的动态操作，包括通过输入框和下拉框添加、删除、上移和下移列表项，并提供了数据绑定和事件处理的示例代码。主要涉及Vue组件、表单元素、数据模型及数组操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表中加，减，上下移操作列

效果图：
在这里插入图片描述

  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="模板名称">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="模板类型">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="contentWrapper">
      <div class="contentTitle">
        <span class="quotaName">指标名称</span>
        <span class="quotaType">指标阀值</span>
        <span class="quotaRet">指标包含关系</span>
      </div>
      <div class="singleContent" v-for="(ele,index) in quotaList" :key="index">
        <div class="nameSelect">
          <el-select v-model="ele.quotaName" placeholder="请选择">
            <el-option
              v-for="item in quotaName"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="typeSelect">
          <el-select v-model="ele.quotaType" placeholder="请选择">
            <el-option
              v-for="item in quotaType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            width="60px"
            v-model="ele.quotaNum"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="relationsSelect">
          <el-select v-model="ele.quataRa" placeholder="请选择">
            <el-option value="且"> 且</el-option>
            <el-option value="或"> 或</el-option>
          </el-select>
          <div class="btnWrapper">
            <el-button  @click="addQuota">加</el-button>
            <el-button @click="reduceQuota(index)">减</el-button>
            <el-button v-show="index!=0" @click="upQuota(index)">上移</el-button>
            <el-button v-show="(index+1)!=quotaList.length" @click="downQuota(index)">下移</el-button>
            <el-button @click="clearQuota(ele,inedx)">清空</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>


————————————————————————————————————————————————————————————————————————

........

 data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      quotaObj:{
        quotaName:'',quotaType:'',quotaNum:'',quotaRa:''
      },
      quotaList: [{
        quotaName:'',quotaType:'',quotaNum:'',quotaRa:''
      }],
      quotaName: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      quotaType: [
        {
          value: "大于",
          label: "大于",
        },
        {
          value: "小于",
          label: "-小于",
        },
        {
          value: "等于",
          label: "等于",
        },
      ],
    };
  },
  methods: {
    // 添加
    addQuota(){
      this.quotaList.push(JSON.parse(JSON.stringify(this.quotaObj)) )
    },
    // 删去
    reduceQuota(i){
      this.quotaList=this.quotaList.filter((item,index)=>(
        i!=index
      ))
      console.log(this.quotaList)
    },
    // 上移
    upQuota(i){
      this.quotaList[i]= this.quotaList.splice(i-1,1,this.quotaList[i])[0]
    },
    //下移
    downQuota(i){
      this.quotaList[i]= this.quotaList.splice(i+1,1,this.quotaList[i])[0]
    },
    // 清空
    clearQuota(obj,i){
      for(let key in obj){

         obj[key]  = ''

     }
     this.quotaList[i] = obj
    }
  },