vue 列表中输入框input 编辑名称

最新推荐文章于 2024-05-14 19:53:07 发布

xggllc

最新推荐文章于 2024-05-14 19:53:07 发布

阅读量1k

点赞数 1

分类专栏： VUE Piece 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/xggllc/article/details/125835715

版权

VUE Piece 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实现效果如下：

鼠标hover 列表，显示编辑按钮；

点击编辑后，出现输入框；

输入框变化后、回车或者点击其它地方，输入框消失

vue 代码如下

用了 "element-ui": "^2.15.6",

<template>
  <div class="list-box">
    <div class="work-table-list">
      <p class="table-name flex-row-between-space"
          :class="{'active': item.tb_id === activeDataSet.tb_id}"
          v-for="(item, index) in dataSetList"
          :key="item.tb_id"
          @click="selectDataSet(item)">
        <span style="cursor: pointer" v-show="!item.isShowInput" class="single-row">{{ item.name }}</span>
        <el-input
          size="mini"
          :ref="'set-name-input-' + index"
          @keyup.enter.native="dataSetChangeName(item, index)"
          @change="dataSetChangeName(item, index)"
          @blur="dataSetNameBlur(item, index)"
          v-model="item.name"
          v-show="item.isShowInput"
          placeholder="">
        </el-input>
        <i class="el-icon-edit item-icon" @click="dataSetRename(item, index)"></i>
      </p>
      <p v-if="dataSetList.length === 0" class="custom-tips-info">请拖入工作表</p>
    </div>
  </div>
</template>

<script>

export default {
  name: 'list',
  data () {
    return {
      // 列表
      dataSetList: [{
        tb_id: 'id_test_001',
        name: '测试01',
        isShowInput: false
      },{
        tb_id: 'id_test_002',
        name: '测试02',
        isShowInput: false
      },{
        tb_id: 'id_test_003',
        name: '测试03',
        isShowInput: false
      }],
      activeDataSet: {
        tb_id: 'id_test_001',
        name: '测试01',
        isShowInput: false
      },
    }
  },
  methods: {
    // 选中
    selectDataSet(item) {
      if (this.activeDataSet.tb_id !== item.tb_id) {
        this.activeDataSet = item;
      }
    },
    dataSetChangeName(item, index) {
      item.isShowInput = false;
      // 名字有修改时才触发保存
      if (this.activeDataSet.name !== item.name) {
        this.$emit('dataSetChangeName', item);
      }
      this.$set(this.dataSetList, index, item);
      this.$nextTick(() => {
        this.$refs['set-name-input-' + index][0].blur();
      });
    },
    // 失去焦点是触发
    dataSetNameBlur(item, index) {
      item.isShowInput = false;
      this.$set(this.dataSetList, index, item);
    },
    // 重命名
    dataSetRename(item, index) {
      this.setDataSetList();
      item.isShowInput = true;
      this.$set(this.dataSetList, index, item);
      this.$nextTick(() => {
        this.$refs['set-name-input-' + index][0].focus();
      });
    },
    setDataSetList(index = -1) {
      this.dataSetList.forEach(item => {
        item.isShowInput = false;
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.list-box {
  .work-table-list {
    width: 320px;
    background: #dddbdb3b;
    margin-top: 16px;
    .custom-tips-info {
      color: rgba(21, 22, 24, 0.36);
    }
    .table-name {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      padding-left: 16px;
      height: 32px;
      line-height: 32px;
      align-items: center;
      margin: 0;
      .item-icon {
        display: none;
        margin: 0 8px;
      }
      &:hover {
        background: #e9e7e7;
        .item-icon {
          display: block;
        }
      }
      /deep/ .el-input__inner {
        // background: rgba(15,34,67,0.03);
        box-shadow: inset 0px -1px 0px rgba(95, 97, 102, 0.24);
        border-radius: 4px 4px 0px 0px;
        border: none;
        color: rgba(15,34,67,0.72);
        font-size: 14px;
        height: 28px;
      }
    }
    .active {
      background: #eef0f4;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25), 0 10px 12px 0 rgba(170, 182, 206, 0.36);
    }
    .single-row {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>