属性管理

刀刀

1/2/2025

0 字

0 分钟

属性管理模块主要实现功能如下：

顶部三级分类联级选择
选择完三级分类后获取表格数据
表格数据的增删改

下面具体分析每个步骤。

三级分类联级选择

三级分类主要实现功能如下：

选择完一级分类后，调用接口获取二级分类的选项数据
选择完二级分类后，调用接口获取三级分类的选择数据
选择完三级分类后，调用接口获取表格数据

其中需要注意的点在于，用户未选择一级分类时，无法使用二、三级分类的选择器，应当处于禁用状态或提示用户。

如果用户选择完所有分类后重新选择一级分类，则已经保存的下级分类 id 与表格数据应该清除，而不是继续保留之前的数据。

而属性新增按钮需要在用户选择三级分类后才可使用，当三级分类 id 数据为空时，禁用该按钮的使用。

属性值的增改

点击新增按钮或者编辑按钮，可对该属性的属性值做增加或修改的操作，属性值的增改可以在预览模式和修改模式之间来回切换，当鼠标点击处于预览模式的属性值时，则显示输入框；当用户按下回车键或者输入框失焦时，隐藏输入框显示文本内容。

通过 v-if 与 v-else 判断动态显示隐藏输入框与 DIV 盒子，为 DIV 盒子绑定点击事件，点击时修改状态显示输入框；为输入框绑定失焦与回车按键事件，触发后显示 DIV 盒子。

而判断的状态如果直接设置（如下所示）

const flag = ref<boolean>(false)

则会造成所有表格的属性值模式都是一样的，也就意味着点击一个 div ，所有表格的输入框都会显示；一个输入框失焦，所有输入框都会隐藏，这显然不符合场景需求。因此其状态需要绑定在各自表格对象内，如下所示：

vue

<el-table-column label="属性值名称">
  <template #default="{ row, $index }">
    <el-input
      v-model="row.valueName"
      v-if="!row.flag"
      v-focus
      placeholder="请输入属性值"
      @blur="blurInputFn(row, $index)"
    ></el-input>
    <div v-else @click="row.flag = false">{{ row.valueName }}</div>
  </template>
</el-table-column>

在输入框失焦时需要对用户输入的内容做出校验与判断：

当用户未输入内容时，禁止其失焦并提示用户输入内容
当用户输入内容与其他内容相同时，禁止其失焦并提示用户
实现这个判断需要获取到用户当前失焦的数据索引项，判断其索引是否相等，不等才判断内容。否则会把该索引的内容也判断在内，必然会相等。

const blurInputFn = (row: attrValueType, index: number) => {
  if(!row.valueName) return
  
  // 当有相同内容且索引不一样时，禁止其失焦
  const flag = attrParams.value.attrValueList.some((item, i) => i !== index && item.valueName === row.valueName)
  if(flag) {
    ElMessage.warning('不可添加重复数据')
    return
  }
  row.flag = true
}

最后保存按钮通过判断所有的 flag 状态来决定是否禁用即可。

自动聚焦

为了方便用户体验，在用户显示输入框时让输入框默认处于聚焦状态，此处使用到了自定义事件。

在 Vue3 中，自定义事件的定义方法如下：

定义一个 vXxxx 的对象，注意要 v 开头且是驼峰命名
在组件挂载 mounted 事件函数的形参中获取该组件
找到需要的输入框组件为其设置 focus() 方法
在组件中通过 v-xxxx 使用

vue

<script setup lang="ts">
// 自定义指令
const vFocus = {
  mounted (el) {
    nextTick(() => {
      el.children[0].children[0].focus()
    })
  }
}
</script>

属性管理 ​

三级分类联级选择 ​

属性值的增改 ​

自动聚焦 ​

属性管理

三级分类联级选择

属性值的增改

自动聚焦