vue表格-增加/删除一行

最新推荐文章于 2024-08-26 10:27:22 发布

林某人666

最新推荐文章于 2024-08-26 10:27:22 发布

阅读量6.8k

点赞数 4

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_26586953/article/details/106838067

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表格增加一行或者减少一行

xx.vue

<template>
  <div>
    <el-table :data="linkData" style="width:70%;" max-height="250">
      <el-table-column
        prop="linkName"
        label="链接名称"
        align="center"
        show-overflow-tooltip
        min-width="30%"
      >
        <template slot-scope="scope">
          <el-input size="small" v-model="linkData[scope.$index].linkName" placeholder="请填写链接名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        min-width="70%"
        prop="href"
        label="链接地址"
        type="url"
      >
        <template slot-scope="scope">
          <el-input size="small" v-model="linkData[scope.$index].href"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="change"
        label="操作"
        align="center"
        show-overflow-tooltip
        min-width="16%"
      >
        <template slot-scope="scope">
          <!-- <el-button v-if="scope.$index === 0" @click="add" circle el-icon-plus>添加</el-button> -->
          <el-button
            size="small"
            v-if="scope.$index === 0"
            @click="add"
            type="primary"
            icon="el-icon-plus"
            circle
          ></el-button>
          <el-button
            size="small"
            v-if="scope.$index > 0"
            @click="deleteRow(scope.$index)"
            type="danger"
            icon="el-icon-close"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      linkData: [
        {
          linkName: null,
          href: null
        }
      ]
    }
  },
  components: {
  },
  mounted (linkData) {
    console.log(linkData)
  },
  props: {
    linkData: {
      type: Object,
      default: null
    }
  },
  methods: {
    /**
    * 添加一行规格
    */
    add () {
      if (this.linkData.length >= 5) {
        this.$message.error('最多添加5个链接')
        return
      }
      this.linkData.push({ linkName: '', href: '' })
    },
    /**
     * 删除一行规格
     */
    deleteRow (index) {
      this.linkData.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
</style>

自定义table表头

在这里插入图片描述


<el-table-column prop="visitor" label="访客数" v-if="isVisible2" sortable>
        <!-- <template slot="header" :slot-scope="{ column, $index }"> -->
        <template slot="header">
          <span>访客数</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            content="统计时间内，商品详情页被访问的去重人数，一个人在统计时间范围内访问多次记为一人。注意，若顾客浏览商品列表并直接加购、下单，未进入商详页，则不会记入该商品的访客数，此时，会出现商品的访客数小于支付人数的情况"
          >
            <i class="el-icon-question" slot="reference"></i>
          </el-popover>
        </template>
      </el-table-column>