vue3使用element-p加本地存储渲染表格实现增删改查并且渲染到Echarts

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'; //引入echarts
const editDialogVisible = ref(false) //修改弹框
const addDialogVisible = ref(false) //添加弹框
const showname = ref("") //搜索 input的值
const tableData = ref([]);//表格数据 用于渲染
const originalTableData = ref([]);//用来搜索的数据存储 
const loadLocalStorage = () => {
    const storedData = localStorage.getItem('tableData');  //获取本地存储数据
    if (storedData) {
        tableData.value = JSON.parse(storedData); // 赋值给tableData 用于渲染
        originalTableData.value = JSON.parse(storedData);  // 保存一份原始数据用于搜索
    } else {
        // 如果没有本地存储的数据，使用初始数据
        tableData.value = [
            {
                id: 1,
                name: "zs",
                num: 10
            },
            {
                id: 2,
                name: "ls",
                num: 4
            },
            {
                id: 3,
                name: "ww",
                num: 6
            },
            {
                id: 4,
                name: "ml",
                num: 10
            },
            {
                id: 5,
                name: "zq",
                num: 15
            },
            {
                id: 6,
                name: "qw",
                num: 1
            },
            {
                id: 7,
                name: "yy",
                num: 14
            },
        ];
    }
};

//每次操作后更新本地存储数据
const saveToLocalStorage = () => {
    localStorage.setItem('tableData', JSON.stringify(tableData.value));
};
//修改表单
const editForm = ref({
    id: '', //在修改时，id不能修改，所以不需要绑定到表单 或者禁用
    name: '',
    num: '',
});
//添加表单
const addForm = ref({
    id: '',
    name: '',
    num: '',
});
//添加
const addbtn = () => {
    tableData.value.push(addForm.value)
    addDialogVisible.value = false
    saveToLocalStorage();//每次操作以后进行本地存储更新
    upEcharts()//更新Echarts
}
//删除
const del = (row: any) => {
    console.log('Deleting row:', row);
    const index = tableData.value.indexOf(row);
    if (index !== -1) {
        tableData.value.splice(index, 1);
        saveToLocalStorage();//每次操作以后进行本地存储更新
        upEcharts()//更新Echarts
    }
};
const edit = (row: any) => {
    // 显示编辑对话框，并将行数据填充到编辑表单中
    editForm.value = { ...row };
    editDialogVisible.value = true;
};
//修改逻辑
const saveEdit = () => {
    const index = tableData.value.findIndex(item => item.id === editForm.value.id);
    if (index !== -1) {
        tableData.value[index] = { ...editForm.value };
        editDialogVisible.value = false;
        saveToLocalStorage(); //每次操作以后进行本地存储更新
        upEcharts()//更新Echarts
    }
};
//搜索
const show = (e) => {
    if (e.keyCode == 13) {
        tableData.value = originalTableData.value.filter((item: any) => item.name.includes(showname.value));
        upEcharts()//更新Echarts
    }
}
//创建Echarts图 将所有图放在一个方法里面 方便页面更新时从新渲染Echarts
const upEcharts = () => {
    //获取存放echarts的dom节点
    let myChart1 = echarts.init(document.getElementById("zhexian"));
    let myChart2 = echarts.init(document.getElementById("bingxing"));
    let myChart3 = echarts.init(document.getElementById("zhuxing"));
    // 绘制图表折线图
    myChart1.setOption({
        xAxis: {
            data: tableData.value.map((item: any) => item.name),
        },
        yAxis: {},
        series: [
            {
                type: "line",
                data: tableData.value.map((item: any) => item.num),
            }
        ]
    });
    // 绘制图表柱形图
    myChart2.setOption({
        xAxis: {
            data: tableData.value.map((item: any) => item.name),
        },
        yAxis: {},
        series: [
            {
                type: "bar",
                data: tableData.value.map((item: any) => item.num),
            }
        ]
    });
    // 绘制图表饼形图
    myChart3.setOption({
        series: [
            {
                type: 'pie',
                data: tableData.value.map((item) => ({ value: item.num, name: item.name })),
            }
        ]
    });
}
//初始化页面
onMounted(() => {
    loadLocalStorage();
    saveToLocalStorage()
    upEcharts()
});
</script>

<template>
    <!-- 搜索 -->
    <div><span>查询名称：<el-input v-model="showname" style="width: 240px" placeholder="通过name进行搜索"
                @keyup="(e) => show(e)" /></span>
        <el-button type="primary" @click="addDialogVisible = true">add</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="id" width="150" />
        <el-table-column prop="num" label="num" width="120" />
        <el-table-column prop="name" label="name" width="120" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="del(row)">
                    Delete
                </el-button>
                <el-button link type="primary" size="small" @click="edit(row)">Edit</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 修改 -->
    <el-dialog v-model="editDialogVisible" title="修改" width="500">
        <el-form style="max-width: 600px">
            <el-form-item label="id">
                <el-input v-model="editForm.id" disabled />
            </el-form-item>
            <el-form-item label="name">
                <el-input v-model="editForm.name" />
            </el-form-item>
            <el-form-item label="num">
                <el-input v-model="editForm.num" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editDialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="saveEdit">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog v-model="addDialogVisible" title="添加" width="500">
        <el-form style="max-width: 600px">
            <el-form-item label="id">
                <el-input v-model="addForm.id" />
            </el-form-item>
            <el-form-item label="name">
                <el-input v-model="addForm.name" />
            </el-form-item>
            <el-form-item label="num">
                <el-input v-model="addForm.num" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="addbtn">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- //charts -->
    <div class="chartsbox">
        <!-- 图表 每个图标必须设置宽高 给每个标签设置id 因为id是唯一的 然后用来获取dom节点 -->
        <div id="zhexian" :style="{ width: '500px', height: '300px' }"></div>
        <div id="bingxing" :style="{ width: '500px', height: '300px' }"></div>
        <div id="zhuxing" :style="{ width: '500px', height: '300px' }"></div>
    </div>
</template>