element-plus表格组件简单用法（增删改查）

1.查，删

<template>
  <div class="deviceBox">
    <h4>设备管理</h4>
    <div class="head">
      <el-select
        v-model="value"
        placeholder="==请选择设备名称=="
        size="small"
        @change="handleChange"
      >
        <el-option key="全部" label="全部" value="全部" />
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div class="headRight">
        <div class="block">
          <img src="/src/assets/001.png" alt="" /><span>导入</span>
        </div>
        <div class="block">
          <img src="/src/assets/002.png" alt="" /> <span>导出</span>
        </div>
        <div class="block">
          <img src="/src/assets/003.png" alt="" /> <span>打印</span>
        </div>
        <div class="block" @click="addFn">
          <img src="/src/assets/004.png" alt="" /> <span>添加设备</span>
        </div>
      </div>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      size="small"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column prop="deviceName" label="设备名称" width="100" />
      <el-table-column prop="deviceId" label="设备编号" />
      <el-table-column prop="deviceLocation" label="存放位置" />
      <el-table-column prop="deviceBrank" label="设备品牌" />
      <el-table-column prop="purchaseYear" label="购置年份" />
      <el-table-column prop="deviceCayegory" label="设备分类" />
      <el-table-column prop="deviceState" label="设备状态" />
      <el-table-column prop="devicePerson" label="设备管理员" />
      <el-table-column label="操作" width="140">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editFn(scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="deleteFn(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        small
        background
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getDeviceTypeApi,
  getDeviceListApi,
  delDeviceApi,
  getDeviceListApi2,
} from "@/api/device";
const $router = useRouter();

let value = ref("");
let options: any = reactive([]);
//获取分类列表
const getDeviceType = () => {
  getDeviceTypeApi().then((res: any) => {
    let newdata: any = res.data.map((item: any) => ({
      value: item.name,
      label: item.name,
    }));
    options.splice(0, options.length, ...newdata);
    console.log(options);
    value.value = "";
  });
};
getDeviceType();

//获取列表数据
interface User {
  deviceId: string;
  deviceName: string;
  deviceLocation: string;
  deviceOrigin: string;
  purchaseYear: string;
  deviceCayegory: string;
  deviceState: string;
  devicePerson: string;
  activationdate: string;
  deviceBrank: string;
}
//定义分页
let total = ref(0);
const currentPage = ref(1);
const pageSize = 8;

//定义表格数据为响应式数据
let tableData: User[] = reactive([]);
const getDeviceList = () => {
  getDeviceListApi().then((res: any) => {
    total.value = res.data.length;
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    const current = res.data.slice(start, end);
    tableData.splice(0, tableData.length, ...current);
  });
};
getDeviceList();

// 处理当前页码改变
const handleCurrentChange = (page: any) => {
  currentPage.value = page;
  console.log("pageSize", pageSize);
};

watch(currentPage, () => {
  getDeviceList();
});

//复选框
const handleSelectionChange = () => {};

//点击下拉框
const handleChange = (selectedValue: any) => {
  value.value = selectedValue;
  getDeviceListApi2({ deviceName: value.value }).then((res: any) => {
    tableData.splice(0, options.length, ...res.data);
  });
  if (value.value === "全部") {
    getDeviceList();
  }
};

//新增设备
const addFn = () => {
  $router.push("/Device/AddDevice");
};
//删除设备
const deleteFn = (row: any) => {
  console.log("row", row.id);
  ElMessageBox.confirm("确定要删除该设备吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delDeviceApi(row.id).then((res: any) => {
        console.log(res.data);
        getDeviceList();
      });
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除失败",
      });
    });
};
//编辑
const editFn = (row: any) => {
  console.log("点击编辑按钮", row.id);
  $router.push({ path: "/Device/EditDevice", query: { id: row.id } });
};
</script>

<style lang="less" scoped>
.deviceBox {
  width: 100%;
  height: 100%;
  padding: 10px;

  h4 {
    font-weight: 400;
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .headRight {
      display: flex;
      align-items: center;

      .block {
        padding: 0 10px;
        font-size: 14px;

        img {
          vertical-align: middle;
        }
      }
    }
  }

  .el-select {
    margin-top: 20px;
  }

  .el-table {
    margin-top: 20px;
  }
  .bottom {
    margin-top: 20px;
  }
}
</style>

2.增

<template>
  <el-form :model="form" label-width="120px" size="small">
    <el-row :gutter="24">
      <el-col :span="10">
        <el-form-item label="设备名称">
          <el-select v-model="form.deviceName" placeholder="==请选择分类==">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button type="default">新增</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="规格型号">
          <el-input v-model="form.specificationModel" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备状态">
          <el-input v-model="form.deviceState" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="产地">
          <el-input v-model="form.deviceOrigin" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="品牌">
          <el-input v-model="form.deviceBrank" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="资产编号">
          <el-input
            v-model="form.deviceId"
            placeholder="请输入：设备-检测-科室-设备编号"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备单价">
          <el-input v-model="form.devicePrice" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="购置年份">
          <el-input v-model="form.purchaseYear" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="启用日期">
          <el-date-picker
            v-model="form.activationDate"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="10">
        <el-form-item label="设备分类">
          <el-select v-model="form.deviceCayegory" placeholder="==请选择分类==">
            <el-option label="大型仪器" value="大型仪器" />
            <el-option label="玻璃仪器" value="玻璃仪器" />
            <el-option label="温控设备" value="温控设备" />
            <el-option label="特种设备" value="特种设备" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button type="default">新增</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="10">
        <el-form-item label="设备供货商">
          <el-select v-model="form.supplier" placeholder="==请选择供货商==">
            <el-option label="xxxx" value="xxxx" />
            <el-option label="yyyy" value="yyyy" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button type="default">新增</el-button>
      </el-col>
    </el-row>
    
    <el-row :gutter="24">
      <el-col :span="10">
        <el-form-item label="存放位置">
          <el-select v-model="form.deviceLocation" placeholder="==请选择位置==">
            <el-option label="色谱室" value="色谱室" />
            <el-option label="光谱室" value="光谱室" />
            <el-option label="理化室" value="理化室" />
            <el-option label="微生物室" value="微生物室" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button type="default">新增</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="10">
        <el-form-item label="管理员">
          <el-select v-model="form.devicePerson" placeholder="==请选择管理员==">
            <el-option label="小关" value="小关" />
            <el-option label="小张" value="小张" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button type="default">新增</el-button>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">新增</el-button>
      <el-button @click="cancelFn">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { addDeviceApi, getDeviceTypeApi } from "@/api/device";
const $router = useRouter();

//定义表单数据类型
const form = reactive({
  deviceId: "",
  deviceName: "",
  deviceLocation: "",
  deviceOrigin: "",
  purchaseYear: "",
  deviceCayegory: "",
  deviceState: "",
  devicePerson: "",
  activationDate: "",
  devicePrice: "",
  deviceBrank: "",
  EnglishName: "",
  specificationModel: "",
  supplier: "",
});

//定义表单中下拉框的值为响应式数据
let value = ref("");
let options: any = reactive([]);

//获取分类列表
const getDeviceType = () => {
  getDeviceTypeApi().then((res: any) => {
    let newdata: any = res.data.map((item: any) => ({
      value: item.name,
      label: item.name,
    }));
    options.splice(0, options.length, ...newdata);
    console.log(options);
    value.value = "";
  });
};
getDeviceType();

//新增
const onSubmit = () => {
  console.log("submit!");
  console.log("value", form);
  addDeviceApi(form).then((res: any) => {
    console.log("res.data", res.data);
    ElMessage({
      message: "添加成功.",
      type: "success",
    });
    $router.push("/Device/Manager");
  });
};

//取消修改
const cancelFn = () => {
  $router.push("/Device/Manager");
};
</script>

3.改

<template>
    <div class="editBox">
        <h4>修改设备信息</h4>

        <el-form :model="form" label-width="120px" size="small">
            <el-row :gutter="24">
                <el-col :span="10">
                    <el-form-item label="设备名称">
                        <el-select v-model="device.deviceName" placeholder="==请选择分类==">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="default">新增</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="规格型号">
                        <el-input v-model="device.specificationModel" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备状态">
                        <el-input v-model="device.deviceState" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="产地">
                        <el-input v-model="device.deviceOrigin" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="品牌">
                        <el-input v-model="device.deviceBrank" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="资产编号">
                        <el-input v-model="device.deviceId" placeholder="请输入：设备-检测-科室-设备编号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备单价">
                        <el-input v-model="device.devicePrice" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="购置年份">
                        <el-input v-model="device.purchaseYear" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="启用日期">
                        <el-date-picker v-model="device.activationDate" type="date" placeholder="Pick a date"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="10">
                    <el-form-item label="设备分类">
                        <el-select v-model="device.deviceCayegory" placeholder="==请选择分类==">
                            <el-option label="大型仪器" value="大型仪器" />
                            <el-option label="玻璃仪器" value="玻璃仪器" />
                            <el-option label="温控设备" value="温控设备" />
                            <el-option label="特种设备" value="特种设备" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="default">新增</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="10">
                    <el-form-item label="设备供货商">
                        <el-select v-model="device.supplier" placeholder="==请选择供货商==">
                            <el-option label="xxxx" value="xxxx" />
                            <el-option label="yyyy" value="yyyy" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="default">新增</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="10">
                    <el-form-item label="存放位置">
                        <el-select v-model="device.deviceLocation" placeholder="==请选择位置==">
                            <el-option label="色谱室" value="色谱室" />
                            <el-option label="光谱室" value="光谱室" />
                            <el-option label="理化室" value="理化室" />
                            <el-option label="微生物室" value="微生物室" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="default">新增</el-button>
                </el-col>

            </el-row>

            <el-row :gutter="24">
                <el-col :span="10">
                    <el-form-item label="管理员">
                        <el-select v-model="device.devicePerson" placeholder="==请选择管理员==">
                            <el-option label="小关" value="小关" />
                            <el-option label="小张" value="小张" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="default">新增</el-button>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">修改</el-button>
                <el-button @click="cancelFn">取消</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from "vue-router";
import { editDeviceApi, getDeviceTypeApi, getDeviceListApi1 } from "@/api/device";
const $router = useRouter();
const $route = useRoute();
const id = $route.query.id;

//定义设备数据类型
const device = reactive({
    deviceId: '',
    deviceName: '',
    deviceLocation: '',
    deviceOrigin: '',
    purchaseYear: '',
    deviceCayegory: '',
    deviceState: '',
    devicePerson: '',
    activationDate: '',
    devicePrice: "",
    deviceBrank: "",
    specificationModel: "",
    supplier: ""
})

//定义下拉框的值
let value = ref('');
let options: any = reactive([]);

//获取分类列表
const getDeviceType = () => {
    getDeviceTypeApi()
        .then((res: any) => {
            let newdata: any = res.data.map((item: any) => ({ value: item.name, label: item.name }))
            options.splice(0, options.length, ...newdata);
            console.log(options);
            value.value = '';
        })
}
getDeviceType()

//获取当前这个id的数据
const getCurrentDeviceType = () => {
    console.log("id", id);
    getDeviceListApi1(id)
        .then((res: any) => {
            Object.assign(device, res.data);
            console.log("编辑页面的device", device);
        })
}
getCurrentDeviceType();

//修改
const onSubmit = () => {
    console.log('submit!')
    console.log("value", device)
    editDeviceApi(id, device)
        .then((res: any) => {
            console.log("res.data", res.data);
            ElMessage({
                message: '编辑成功.',
                type: 'success',
            })
            $router.push("/Device/Manager")
        })
}

//取消修改
const cancelFn = () => {
    $router.push("/Device/Manager")
}
</script>
<style lang="less" scoped>
.editBox {
    width: 100%;
    height: 100%;
    padding: 10px;

    h4 {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 20px;
        text-align: center;
    }
}
</style>