vxe-table单元格可编辑(下拉选择数值)

最新推荐文章于 2024-10-28 10:20:56 发布

-前端小弟

最新推荐文章于 2024-10-28 10:20:56 发布

阅读量2.6k

点赞数 1

文章标签：数学建模

本文链接：https://blog.csdn.net/m0_61841985/article/details/131121923

版权

首先在vxe-table标签中开启单元格可编辑配置


  <vxe-table
    ref="xTable"
    border
   :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
  >

我们需要在column中利用插槽来进行节点添加

  <vxe-column
    title="ENGUSER"
    field="enguser"
    sortable
    width="110"
    align="center"
    :edit-render="{ name: '$select' }"
  >
    <template #default="{ row }">
      <span>{{ formatSex(row.enguser) }}</span>
    </template>
    <template #edit="{ row }">
      <vxe-select v-model="row.enguser" transfer>
        <vxe-option
          v-for="item in selcetion"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </vxe-select>
    </template>
  </vxe-column>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useEquipmentStore } from "#/store/modules/equipment/equipmentStore";
const equipmentStore = useEquipmentStore();
const selcetion = ref([
  { label: "false", value: "false" },
  { label: "true", value: "true" }
]);
const formatSex = (value: string) => {
  if (value === "false") {
    return "false";
  }
  if (value === "true") {
    return "true";
  }
};
</script>