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：分別對應編輯按鈕和保存按鈕的點擊事件