关于使用Element-plus Table表格示例

kana_yonk

已于 2023-07-25 11:27:15 修改

阅读量1.4k

点赞数 1

文章标签： vue.js 前端 javascript elementui

于 2022-11-09 15:20:51 首次发布

本文链接：https://blog.csdn.net/kana_yonk/article/details/127770373

版权

想要实现上图表格样式需要先基于vue安装elemen-plus，本文章以vscode npm为例，在终端输入命令：npm install element-plus ，待执行结束后，在main.js中部署至全局。

最后在需要展示信息的.vue文件内输入以下为例代码即可实现图示例1上的效果：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="company" label="组织单位" width="280" />
    <el-table-column prop="prod" label="作业区" width="280" />
    <el-table-column prop="profession" label="专业" width="280" />
    <el-table-column prop="mission" label="任务" width="280" />
    <el-table-column label="任务操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">下发</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
  const tableData = [
    {
      company: '炼铁厂',
      prod: '高炉作业区',
      profession: '仪表',
      mission: '高炉铁口更换测温计',
    },
    {
      company: '炼钢厂',
      prod: '转炉作业区',
      profession: '仪表',
      mission: '更换转炉轴承液压计',
    },
  ]
</script>

本次分享，到此结束。