lodash-es 基本使用

中文文档:https://www.lodashjs.com/

cloneDeep方法文档:https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue

参考掘金文章:https://juejin.cn/post/7354940462061715497

安装:

bash 复制代码
pnpm install lodash-es

npm地址:https://www.npmjs.com/package/lodash-es

github地址:https://github.com/lodash/lodash

在antd组件库中的使用示例:

html 复制代码
<template>
  <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button>
  <a-table bordered :data-source="dataSource" :columns="columns">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'name'">
        <div class="editable-cell">
          <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
            <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
            <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
          </div>
          <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
          </div>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="onDelete(record.key)"
        >
          <a>Delete</a>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { computed, reactive, ref } from 'vue';
import {CheckOutlined, EditOutlined} from "@ant-design/icons-vue";
import { cloneDeep } from 'lodash-es';

const columns = [
  {
    title: 'name',
    dataIndex: 'name',
    width: '30%',
  },
  {
    title: 'age',
    dataIndex: 'age',
  },
  {
    title: 'address',
    dataIndex: 'address',
  },
  {
    title: 'operation',
    dataIndex: 'operation',
  },
];
const dataSource = ref([
  {
    key: '0',
    name: 'Edward King 0',
    age: 32,
    address: 'London, Park Lane no. 0',
  },
  {
    key: '1',
    name: 'Edward King 1',
    age: 32,
    address: 'London, Park Lane no. 1',
  },
]);
const count = computed(() => dataSource.value.length + 1);
const editableData = reactive({});
const edit = key => {
  editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = key => {
  Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
  delete editableData[key];
};
const onDelete = key => {
  dataSource.value = dataSource.value.filter(item => item.key !== key);
};
const handleAdd = () => {
  const newData = {
    key: `${count.value}`,
    name: `Edward King ${count.value}`,
    age: 32,
    address: `London, Park Lane no. ${count.value}`,
  };
  dataSource.value.push(newData);
};
</script>
<style lang="less" scoped>
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

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

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

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

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
相关推荐
渣渣盟13 小时前
中文分词技术全解析
搜索引擎·全文检索·lucene
周杰伦_Jay13 小时前
【Git操作详解】Git进行版本控制与管理,包括分支,提交,合并,标签、远程仓库查看
大数据·ide·git·科技·分类·github
lifallen14 小时前
从Apache Doris 学习 HyperLogLog
java·大数据·数据仓库·算法·apache
DolphinScheduler社区15 小时前
# 3.1.8<3.2.0<3.3.1,Apache DolphinScheduler集群升级避坑指南
java·大数据·开源·apache·任务调度·海豚调度
智海观潮16 小时前
HBase高级特性、rowkey设计以及热点问题处理
大数据·hadoop·hbase
zskj_qcxjqr16 小时前
七彩喜理疗艾灸机器人:传统中医与现代科技的融合创新
大数据·人工智能·科技·机器人
AutoMQ16 小时前
活动回顾 | AutoMQ 新加坡 TOKEN2049:展示高效 Web3 数据流基础设施
大数据·web3
龙山云仓17 小时前
迈向生成式软件制造新纪元:行动纲领与集结号
大数据·人工智能·机器学习·区块链·制造
武子康18 小时前
大数据-121 - Flink 时间语义详解:EventTime、ProcessingTime、IngestionTime 与 Watermark机制全解析
大数据·后端·flink