Vue动态添加删除div

栏目: JavaScript · 发布时间: 4年前

内容简介:小结vue实现动态加载div,主要利用vue中的v-for指令,由于与数据源双向绑定的特性,可以通过修改数据源从而动态加载或删除div。

效果图

Vue动态添加删除div

完整源码

<template>

<div class="boxShadow">
    <div>
      <el-button style="width:90px; font-size: 12px">全部扫描</el-button>
      <el-button style="width:90px; font-size: 12px">全部清除</el-button>
    </div>
    <div>

    <div style="margin-top: 15px;" v-for="(item, pos) in divList">
      <el-input placeholder="请输入仓库地址,如有分支则空格隔开加分支名称,默认不加检测master分支。" v-model="item.gitUrl" class="input-with-select">
        
        <!-- 编码规则 -->
        <template>
          <el-select v-model="item.codeType" slot="prepend" placeholder="请选择编码规则" style="width: 150px">
            <el-option
              v-for="opItem in options"
              :key="opItem.value"
              :label="opItem.label"
              :value="opItem.value">
            </el-option>
          </el-select>
        </template>

        <!-- 删除 -->
        <el-button slot="append" @click="deleteNode(pos)">删除</el-button>
      </el-input>
    </div>

    <div style="width: 100%; text-align:center; margin-top: 15px; margin-bottom: 15px">
      <!-- 增加 -->
      <el-button icon="el-icon-plus" @click="addNode()"></el-button>
    </div>

    <el-table
      :data="data"
      :header-cell-style="tableHeaderColor"
      ref='multipleTable'
      border
      stripe
      style="width: 100%; margin-top: 20px; font-size: 10px">

        <el-table-column
          align="center"
          prop="projectName"
          label="仓库名"
          width="200">
          <template slot-scope="scope">
            <div class="tv-branch"> {{ scope.row.projectName }}</div>
          </template>
        </el-table-column>

        <el-table-column
          class="tv-branch"
          align="center"
          prop="jiraId"
          label="分支名">
          <template slot-scope="scope">
            <div class="tv-branch"> {{ scope.row.jiraId }}</div>
          </template>
        </el-table-column>

        <el-table-column label="文件数" min-width="130px" align="center">
          <template slot-scope="scope">
            <div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.appName }}</div>
          </template>
        </el-table-column>

        <el-table-column label="不规范项" min-width="130px" align="center">
          <template slot-scope="scope">
            <div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.branchName }}</div>
          </template>
        </el-table-column>

        <el-table-column label="SonarQube地址" min-width="130px" align="center">
          <template slot-scope="scope">
            <div v-for="item in scope.row.appVos" class="tv-branch"> {{ item.branchName }}</div>
          </template>
        </el-table-column>

        <el-table-column
          class="tv-branch"
          align="center"
          prop="updatedTime"
          label="扫描时间">
          <template slot-scope="scope">
            <div class="tv-branch"> {{ scope.row.updatedTime }}</div>
          </template>
        </el-table-column>

    </el-table>
  </div>
  </div>

</template> 
<script type='text/javascript'>

  export default {
    name: 'xxx',

    methods: {

      // 修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #f0f9eb'
          // return 'background-color: #f0f9eb; color: #fff; font-weight: 500;'
        }
      },


      //添加标本div
      addNode() {
        this.divList.push({"codeType": "", "gitUrl": ""});
      },
      //删除样本div
      deleteNode(i) {
        this.divList.splice(i, 1);  //删除index为i,位置的数组元素
      },

    },

    
    data() {
      return {
        data: [],

        options: [{
          value: '选项1',
          label: 'Java'
        }, {
          value: '选项2',
          label: 'C#'
        }, {
          value: '选项3',
          label: 'iOS'
        }, {
          value: '选项4',
          label: 'Js'
        }, {
          value: '选项5',
          label: 'Python'
        }],

        divList: [
          {"codeType": "", "gitUrl": ""}
        ],
      
      }
      
    },

  }


</script>

<style lang="less" scoped>
  .clean{
      clear:both;
  }

  .tv-branch{
    // display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

小结

vue实现动态加载div,主要利用vue中的v-for指令,由于与数据源双向绑定的特性,可以通过修改数据源从而动态加载或删除div。


以上所述就是小编给大家介绍的《Vue动态添加删除div》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

性能之巅

性能之巅

Brendan Gregg / 徐章宁、吴寒思、陈磊 / 电子工业出版社 / 2015-8-15 / 128

《性能之巅:洞悉系统、企业与云计算》基于Linux 和Solaris 系统阐述了适用于所有系统的性能理论和方法,Brendan Gregg 将业界普遍承认的性能方法、工具和指标收集于本书之中。阅读本书,你能洞悉系统运作的方式,学习到分析和提高系统与应用程序性能的方法,这些性能方法同样适用于大型企业与云计算这类最为复杂的环境的性能分析与调优。一起来看看 《性能之巅》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具