vue动态生成索引列表

最新推荐文章于 2024-07-02 16:56:15 发布

今晚来我家吗

最新推荐文章于 2024-07-02 16:56:15 发布

阅读量1k

点赞数

分类专栏： vue动态列表动态索引文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/qq_43059898/article/details/109135833

版权

vue动态列表动态索引专栏收录该内容

1 篇文章 0 订阅

订阅专栏

        <el-row
                    class="textarea_top"
                    v-for="(item, i) in trcList"
                    :key="item.Code + i"
                  >
                    <el-col :span="20">
                      <el-form-item
                        :label="item.Code + ':'"
                        label-width="100px"
                      >
                        <el-input
                          type="textarea"
                          :rows="2"
                          :disabled="isData"
                          resize="none"
                          v-model="item.Value"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <template v-if="isData == false">
                      <el-col
                        :span="2"
                        class="pointer div_line_height div_padding"
                      >
                        <el-button size="mini" type="success" icon="el-icon-plus" plain @click="addTrc('trc', i)"></el-button>
                      </el-col>
                      <el-col :span="2" class="pointer div_line_height">
                        <el-button size="mini" type="primary" icon="el-icon-minus" plain @click="delTrc('trc', i)"></el-button>
                      </el-col>
                    </template>
                  </el-row>
                </div>

        data() {
	return {
	trcList: [{ Code: "RC1", Value: "", Type: 31 }],
}
},

 methods: {
	    /**
     * 添加 trc
     * @type 添加的是那个数组
     */
    addTrc(type, i) {
      if (type === "trc") {
        // 数组排序从小到大
        //  arr.sort((a,b)=> a.key - b.key);
        this.trcList.splice(i + 1, 0, {
          Code: `RC${this.trcList.length + 1}`,
          Value: null,
          Type: 31
        });
      }
    },

    /**
     * 删除
     * @type 删除的是那个数组
     * @i 被点击的索引
     */
    delTrc(type, i) {
      if (type === "trc") {
        if (this.trcList.length === 1) {
          return;
        }
        this.trcList.splice(i, 1);
        let arr = [];
        for (let i = 0; i < this.trcList.length; i++) {
          let newArr = {
            Code: `RC${i + 1}`,
            Value: this.trcList[i].Value,
            Type: this.trcList[i].Type
          };
          arr.push(newArr);
        }
        this.trcList = arr;
      }
    },

}