ant-design可编辑单元格加入select选择器

1. 需求：

2. 分析：

• 使用ant-design里面Table表格的可编辑单元格模板以及select选择器进行改造。

https://www.antdv.com/components/table-cn/#components-table-demo-editable-cells

• 将Table表格可编辑单元格中的input框替换成select选择器，并且加上鼠标悬浮气泡提示
• 再进行数据传输

3. 代码

<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <a-select
        mode="multiple"
        style="width: 100%"
        placeholder="Please select"
        @change="handleChange"
      >
        <a-select-option v-for="option in options" :key="option">
          {{ option }}
        </a-select-option>
      </a-select>
      <a-icon
        type="save"
        theme="filled"
        class="editable-cell-icon-check"
        @click="check"
      />
    </div>
    <div v-else class="editable-cell-text-wrapper">
      <a-tooltip :title="value">
        <span class="text">{{ value }}</span>
      </a-tooltip>
      <a-icon type="edit" class="editable-cell-icon" @click="edit" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      value: "",
      editable: false,
    };
  },
  methods: {
    handleChange(value) {
      this.value = value.join(",");
    },
    edit() {
      this.editable = true;
    },
    check() {
      this.editable = false;
    },
  },
};
</script>

<style>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
  display: flex;
  align-items: center;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}
.editable-cell-text-wrapper .text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon,
.editable-cell-icon-check {
  line-height: 18px;
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}
</style>

 

3.1 代码分析：

• options：父组件传过来的值，为select选择器的选项
• 定义两个变量：
  • value：显示在span标签内以及提示框内的值
  • editable：是否可编辑（true为可编辑，即显示select框）
• 定义的方法：
  • handleChange：拿到当前选择的选项（多选情况下为数组），并且将其拼接成字符串
  • edit和check：分别对应编辑按钮和保存按钮的点击事件