Element Plus使用（五）

Element Plus

官网：https://element-plus.org/zh-CN/
安装：npm install element-plus --save

导入组件（main.js）

// 整体导入 EmementPlus 组件库
import ElementPlus from 'element-plus' // 导入 EmementPlus 组件库的所有模块和功能
import 'element-plus/dist/index.css' // 导入 EmementPlus 组件库所需的全局 CSS 样式

按钮

<script setup>

</script>

<template>
  <h3>学习element-plus</h3>

  <h3>按钮</h3>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>

  <hr>
  <h3>按钮属性</h3>
  <h3>按钮属性</h3>
  <el-button plain>朴素按钮</el-button>
  <el-button round>圆角按钮</el-button>
  <el-button circle>圆</el-button>
  <el-button disabled>禁用按钮</el-button>
  <el-button loading>加载中</el-button>

  <hr>
  <h3>尺寸</h3>
  <el-button size="large">大型按钮</el-button>
  <el-button>默认按钮</el-button>
  <el-button size="small">小型按钮</el-button>
  
</template>

<style scoped>

</style>

图标

图标不展示：没有导入

import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
import App from './App.vue'
const app = createApp(App)

//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

图标的使用：

<script setup>

</script>

<template>
  <h3>图标学习</h3>
  <h3>图标</h3>
  <!-- Failed to resolve component: Plus -->
   <!-- 使用之前，应该导入图标并注册到vue中 -->
  <el-icon><Plus /></el-icon>
  <el-icon><Edit /></el-icon>
  <el-icon><Delete /></el-icon>
  <el-icon class="is-loading"><Loading /></el-icon>

  
  <hr>
  <h3>属性</h3>
  <el-icon size="30" color="red"><Search /></el-icon>

  <hr>
  <h3>按钮</h3>
  <el-button type="primary">
      <el-icon><Search /></el-icon>
      <span> 搜索 </span>
  </el-button>
  <el-button type="primary">
      <el-icon><Search /></el-icon>
  </el-button>
  <el-button type="primary" circle>
      <el-icon><Search /></el-icon>
  </el-button>

  <hr>
  <h3>按钮组</h3>
  <el-button-group>
      <el-button type="primary">
          <el-icon><Plus /></el-icon>
      </el-button>
      <el-button type="primary">
          <el-icon><Edit /></el-icon>
      </el-button>
      <el-button type="primary">
          <el-icon><Delete /></el-icon>
      </el-button>
  </el-button-group>

</template>

<style scoped>

</style>

提示框

<script setup>
  // ElMessage:消息
  // ElMessageBox：消息框
  // ElNotification：确认消息
  import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

  // 消息
  const openMsg = () => {
    ElMessage({
        type: 'success', // 属性值：success warning info error
        message: '这是一条成功的消息',
        showClose: true // 是否显示关闭按钮
    })
  }

  // 确认框
  const openConfirm = () => {
    ElMessageBox.confirm('确认删除？', '标题', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
    }).then(() => {
        console.log('确认')
    }).catch(() => {
        console.log('取消')
    })
  }

  // 通知
  const openNotify = () => {
    ElNotification({
        title: '标题',
        message: '这是一条通知',
        duration: 1500 // 展示时间，（单位：毫秒）
    })
  }

  const openNotify2 = () => {
    ElNotification({
        type: 'success', // 属性值： success warning info error
        title: '标题',
        message: '这是一条通知',
        duration: 1500,
        position: 'top-left' // 属性值： top-left top-right bottom-right bottom-left
    })
  }
</script>

<template>
  <el-button @click="openMsg">消息</el-button>
  <el-button @click="openConfirm">确认框</el-button>
  <el-button @click="openNotify">通知</el-button>
  <el-button @click="openNotify2">通知2</el-button>
</template>

<style scoped>

</style>

导航

<script setup>
  // 导航
  import { reactive, ref } from 'vue'

  // 默认选中的菜单索引
  const selectedIndex = ref("2-2")

  //默认展开的菜单索引
  const defaultOpeneds = ref(["2"])

  // 选择菜单触发的回调
  const selected = (index, indexPath) => {
    console.log("index:", index, "indexPath:", indexPath)
  }

  // 用户执行的命令:
  const userCommand = (command) => { // 点击菜单触发的回调
    console.log('command:', command)
  }
</script>

<template>
  <h3>水平导航</h3>
  <!-- mode="horizontal" -->
  <!-- 要是垂直导航可以不设置 mode -->
  <!-- default-active：表示默认选中的菜单索引 -->
  <!-- select： 表示的是选择某个菜单时，调用某个方法-->

  <!-- 
    自定义导航样式:
    background-color 背景颜色
    text-color 文字颜色
    active-text-color 选中文字后颜色
    style="height: 40px;width: 600px;" :高宽
    default-openeds: 是否默认展开
  -->

  <!-- 
    设置垂直导航:
    去掉mode;
    给导航一个宽度
  -->
  <el-menu
    :default-active="selectedIndex"
    @select="selected"
    background-color="#545c64"
    :default-openeds="defaultOpeneds"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width: 200px"
  >
    <!-- el-menu-item：对应一级导航 -->
    <el-menu-item index="1">学习element-plus</el-menu-item>
    <!-- el-sub-menu：具有二级导航的菜单 -->
    <el-sub-menu index="2">
      <template #title>我的工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>消息中心</template>
      <el-menu-item index="3-1">选项1</el-menu-item>
      <el-menu-item index="3-2">选项2</el-menu-item>
      <el-menu-item index="3-3">选项3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="4">订单管理</el-menu-item>
  </el-menu>

  <h3>面包屑</h3>
  <!-- separator: 分隔符,根据自己的需求设置 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
    <el-breadcrumb-item>zzzz</el-breadcrumb-item>
    <el-breadcrumb-item>dddd</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 下拉菜单 -->
   <!--  @command绑定的事件, 对应的方法:用户执行的命令 -->
  <el-dropdown @command="userCommand">
    <span>
        个人中心<el-icon><User /></el-icon>
    </span>

    <template #dropdown>
        <!-- 下拉菜单 -->
      <el-dropdown-menu>
        <el-dropdown-item command="order">订单</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>

</style>

标签页

<script setup>
  import { ref, reactive } from 'vue'

  // 默认选中的标签名称
  const selectedName = ref("2")

  // 选中标签触发的回调
  const tabClick = (tab, event) => {
    console.log("tab:", tab, "event:", event)
  }

  const tab = reactive({
    arr: [
      { name: '1', title: 'zz', content: '内容1' },
      { name: '2', title: 'zzzz', content: '内容2' },
      { name: '3', title: 'zzzzzz', content: '内容3' }
    ]
  })

  const tabAdd = () => {
    let index = tab.arr.length
    index++
    // 真实会有问题
    // 删除的时候,可能重复添加
    tab.arr.push({ 
        name: index, 
        title: '新选项卡' + index, 
        content: '内容' + index
     })
  }

  const tabRemove = (name) => {
    console.log("name:", name)

    const index = tab.arr.findIndex((value) => {
        return value.name === name
    })

    tab.arr.splice(index, 1)
  }
</script>

<template>
  <h3>学习标签页</h3>

  <h3>标签</h3>
  <!-- v-model 绑定的数据是默认的标签名称  -->
   <!-- @tab-click: 选中标签触发的回调 -->
    <!-- type: 修改样式; card:卡片的形式; border-card:内容也具有了边框 -->
  <el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
    <!-- el-tab-pane 对应的每个子标签 -->
    <el-tab-pane label="zz" name="1">内容1</el-tab-pane>
    <el-tab-pane label="zzzz" name="2">内容2</el-tab-pane>
    <el-tab-pane label="zzzzzz" name="3">内容3</el-tab-pane>
  </el-tabs>

  <h3>动态添加</h3>
  <el-button @click="tabAdd">添加</el-button>

  <el-tabs v-model="selectedName" @tab-remove="tabRemove" closable type="card">
    <el-tab-pane
      v-for="(value, index) in tab.arr"
      :key="value.name" 
      :label="value.title" 
      :name="value.name"
    >
      {{ value.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>

</style>

输入框

<script setup>
  import { ref } from 'vue'

  const name = ref('')
  const password = ref('')
  const content = ref('zzz')
  const url = ref('zzz.com')
  const url2 = ref('zzz2.com')
  const email = ref('123@qq.com')

  const selected = ref('2')
</script>

<template>
  <!-- 输入框 -->
  <h3>输入框</h3>
  <!-- clearable: 可以一键清除 -->
  <el-input v-model="name" clearable placeholder="请输入用户名" />
  
  <!-- show-password 可切换显示隐藏密码 -->
  <h3>密码框</h3>
  <el-input v-model="password" show-password placeholder="请输入密码" />
  
  <h3>文本域</h3>
  <!-- 行数：rows -->
  <el-input type="textarea" v-model="content" rows="2" />
  
  <h3>输入内容长度限制 - 输入框</h3>
  <!-- 限制长度：maxlength -->
  <el-input v-model="name" maxlength="10" show-word-limit />
  
  <h3>输入内容长度限制 - 文本域</h3>
  <el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />
  
  <h3>尺寸：size</h3>
  大：<el-input size="large"></el-input>
  默认：<el-input></el-input>
  小：<el-input size="small"></el-input>

  <h3>前置</h3>
  <el-input v-model="url">
    <template #prepend>https://</template>
  </el-input>

  <h3>后置</h3>
  <el-input v-model="url2">
    <template #append>qq.com</template>
  </el-input>

  <h3>前置后置</h3>
  <el-input v-model="url2">
    <template #prepend>https://</template>
    <template #append>qq.com</template>
  </el-input>

  <h3>前置后置-扩展 搜索</h3>
  <el-input placeholder="请输入课程名称">
    <template #prepend>
      <el-select v-model="selected" placeholder="请选择" style="width: 100px">
        <el-option label="前端" value="1"></el-option>
        <el-option label="后端" value="2"></el-option>
        <el-option label="服务端" value="3"></el-option>
      </el-select>
    </template>
    <template #append>
        <el-button>
            <el-icon><Search /></el-icon>
        </el-button>
    </template>
  </el-input>

</template>

<style scoped>

</style>

单选框、复选框

<script setup>
  import { ref } from 'vue'  
  // 单选框
  const radio = ref('3')
  const radio2 = ref("b")
  const radio3 = ref("C")

  const radioChange = (val) => {
    console.log("radioChange: ", val)
  }

  const radioGroupChange = (val) => {
    console.log("radioGroupChange:", val)
  }

  // 复选框
  const checked = ref(["1", "2"])
  const checked2 = ref([])

  const checkboxGroupChange = (val) => {
    console.log("checkboxGroupChange:", val)
  }
</script>

<template>
  <h3>单选框、复选框</h3>

  <h3>单选框</h3>
  <el-radio v-model="radio" value="1">前端</el-radio>
  <el-radio v-model="radio" value="2">后端</el-radio>
  <el-radio v-model="radio" value="3">服务端</el-radio>

  <h3>单选框 - 事件绑定</h3>
  <el-radio v-model="radio2" value="a" @change="radioChange">前端</el-radio>
  <el-radio v-model="radio2" value="b" @change="radioChange">后端</el-radio>
  <el-radio v-model="radio2" value="c" @change="radioChange">服务端</el-radio>

  <!-- 单选框组 和 事件绑定 的实现效果是一致的-->
  <h3>单选框组</h3>
  <el-radio-group v-model="radio3" @change="radioChange">
    <el-radio value="A">前端</el-radio>
    <el-radio value="B">后端</el-radio>
    <el-radio value="C">服务端</el-radio>
  </el-radio-group>

  <h3>复选框</h3>
  <!-- checked 默认选择 -->
  <el-checkbox-group v-model="checked">
      <el-checkbox value="1">前端</el-checkbox>
      <el-checkbox value="2">后端</el-checkbox>
      <el-checkbox value="3">服务端</el-checkbox>
  </el-checkbox-group>

  <h3>事件绑定</h3>
  <!-- change事件：得到选中的值 -->
  <el-checkbox-group v-model="checked2" @change="checkboxGroupChange">
      <el-checkbox value="1">前端</el-checkbox>
      <el-checkbox value="2">后端</el-checkbox>
      <el-checkbox value="3">服务端</el-checkbox>
  </el-checkbox-group>

</template>

<style scoped>

</style>

下拉框

<script setup>
  import { ref, reactive } from 'vue'
  
  const selected = ref('2')
  const selected2 = ref('')
  const selected3 = ref('c')
  const selected4 = ref(["1", "3"])

  const data = reactive({
    options: [
        { value: 'A', label: '前端' },
        { value: 'B', label: '后端' },
        { value: 'C', label: '服务端' }
    ]
  })

  // 回调:打印选择的value值
  const selectChange = (val) => {
    console.log("selectChange: ", val)
  }
</script>

<template>
  <!-- 下拉框 -->
  <h3>下拉框</h3>
  
  <div style="width: 300px">
    <h3>下拉框</h3>
    <el-select v-model="selected" placeholder="请选择">
      <el-option value="1" label="前端"></el-option>
      <el-option value="2" label="后端"></el-option>
      <el-option value="3" label="服务端"></el-option>
    </el-select>


    <h3>下拉框 - 事件绑定</h3>
    <el-select v-model="selected2" @change="selectChange" placeholder="请选择">
      <el-option value="a" label="前端"></el-option>
      <el-option value="b" label="后端"></el-option>
      <el-option value="c" label="服务端"></el-option>
    </el-select>

    <h3>动态下拉框</h3>
    <el-select v-model="selected3" placeholder="请选择">
        <el-option
          v-for="item in data.options"
          :value="item.value"
          :label="item.label"
          :key="item.value"
        >
        </el-option>
    </el-select>

    <h3>多选 - multiple</h3>
    <el-select v-model="selected4" multiple @change="selectChange" placeholder="请选择">
        <el-option value="1" label="前端" />
        <el-option value="2" label="后端" />
        <el-option value="3" label="服务端" />
    </el-select>
  </div>
</template>

<style scoped>

</style>

日期选择器

<script setup>
  import { ref } from 'vue'

  const date = ref('')

  const dateChange = (val) => {
    console.log("dateChange:", val)
  }
</script>

<template>
  <h3>日期选择器</h3>

  <h3>日期</h3>
  <el-date-picker v-model="date" type="date" placeholder="请选择"></el-date-picker>

  <h3>日期时间</h3>
  <el-date-picker v-model="date" type="datetime" placeholder="请选择"></el-date-picker>

  <h3>事件绑定</h3>
  <!--  value-format="YYYY-MM-DD HH:mm:ss" 日期格式化 -->
  <el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" @change="dateChange"></el-date-picker>

  <!-- 
    如果想要将日期的语言设置为中文，需要在main.js导入中文的语言包
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包

    然后进行语言设置：
    app.use(ElementPlus, {
        locale: zhCn // 设置 Element-plus 组件库的区域语言为中文简体
    })
   -->
</template>

<style scoped>

</style>

表单

融合之前练习的输入框、文本框、单选框、复选框、下拉框、事件选择器等。

<script setup>
import { ref } from 'vue'
const data = ref({
  name: '',
  radio: '',
  checkbox: [],
  date: '',
  select: '',
  multipleSelect: [],
  textarea: ''
})
const add = () => {
  console.log(data.value)
}
const reset = () => {
  data.value = {
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
  }
}

</script>

<template>
  <h3>表单</h3>

  <el-form label-width="80" style="width: 400px">
    <el-form-item label="文本框">
      <el-input v-model="data.name" placeholder="请填写名称"></el-input>
    </el-form-item>

    <el-form-item label="单选框">
      <el-radio-group v-model="data.radio">
        <el-radio value="1">前端</el-radio>
        <el-radio value="2">后端</el-radio>
        <el-radio value="3">服务端</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="复选框">
      <el-checkbox-group v-model="data.checkbox">
        <el-checkbox value="a">前端</el-checkbox>
        <el-checkbox value="b">后端</el-checkbox>
        <el-checkbox value="c">服务端</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="日期时间">
      <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
    </el-form-item>

    <el-form-item label="下拉框">
      <el-select v-model="data.select" placeholder="请选择">
        <el-option value="A" label="前端" />
        <el-option value="B" label="后端" />
        <el-option value="C" label="服务端" />
      </el-select>
    </el-form-item>

    <el-form-item label="多选框">
      <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
        <el-option value="AA" label="前端" />
        <el-option value="BB" label="后端" />
        <el-option value="CC" label="服务端" />
      </el-select>
    </el-form-item>

    <el-form-item label="文本域">
      <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="add">添加</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>

对话框

<script setup>
  import { ref } from 'vue'
  
  const data = ref({
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
  })

  const add = () => {
    console.log(data.value)
  }
  
  const reset = () => {
    data.value = {
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    }
  }
  
  //对话框
  const dialog = ref(false)
  
  const dialogClose = () => {
    reset()
    console.log("关闭")
  }
</script>

<template>
  <!-- 对话框 -->
  <el-button @click="dialog = true">打开</el-button>

  <!-- 
      draggable 允许拖拽
      当关闭对话框时，会调用dialogClose，并打印关闭
  -->
  <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
    <el-form label-width="80">
    <el-form-item label="文本框">
      <el-input v-model="data.name" placeholder="请填写名称" />
    </el-form-item>
    <el-form-item label="单选框">
      <el-radio-group v-model="data.radio">
        <el-radio value="1">前端</el-radio>
        <el-radio value="2">后端</el-radio>
        <el-radio value="3">服务端</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="复选框">
      <el-checkbox-group v-model="data.checkbox">
        <el-checkbox value="a">前端</el-checkbox>
        <el-checkbox value="b">后端</el-checkbox>
        <el-checkbox value="c">服务端</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="日期时间">
      <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
    </el-form-item>
    <el-form-item label="下拉框">
      <el-select v-model="data.select" placeholder="请选择">
        <el-option value="A" label="前端" />
        <el-option value="B" label="后端" />
        <el-option value="C" label="服务端" />
      </el-select>
    </el-form-item>
    <el-form-item label="多选框">
      <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
        <el-option value="AA" label="前端" />
        <el-option value="BB" label="后端" />
        <el-option value="CC" label="服务端" />
      </el-select>
    </el-form-item>
    <el-form-item label="文本域">
      <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="add">添加</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped></style>

分页

<script setup>
  const currentPage = (val) => {
    console.log("currentPage:",val)
  }
</script>

<template>
  <h3>page-size:每页显示记录数 total:总记录数</h3>
  <!--
    layout: 布局；prev, pager, next（前一页、当前页、下一页）
    page-size：每页显示的条数；
    total:总数量 
    background：添加背景
    jumper, total：跳转、显示总数
  -->
  <el-pagination layout="prev, pager, next" :page-size="10" :total="50" />
  
  <h3>background:显示背景</h3>
  <el-pagination layout="prev, pager, next" :page-size="5" :total="50" background />
  
  <h3>layout="total" 显示总数</h3>
  <el-pagination layout="prev, pager, next, total" :page-size="5" :total="50" />
  
  <h3>layout="jumper" 跳转</h3>
  <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />
  
  <h3>事件绑定</h3>
  <el-pagination layout="prev, pager, next" :page-size="5" :total="50" @current-change="currentPage" />
</template>

<style scoped>

</style>

表格

<script setup>
  import { ref } from 'vue'
  const data = ref({
    arr: [
        { id: '1', name: '张三', web: 'zz.com', date: '2024-02-28' },
        { id: '2', name: '李四', web: 'www.zz.com', date: '2024-02-28' },
        { id: '3', name: '王五', web: 'zz.com', date: '2024-02-28' },
        { id: '4', name: '赵六', web: 'www.zz.com', date: '2024-02-28' },
    ]
  })

  // 选中的复选框
  let idArr = []
  const selected = (data) => {
    console.log("selected: ", data)
    idArr = [] // 重置
    data.forEach((value) => {
        idArr.push(value.id)
    })

    console.log("idArr:", idArr)
  }

  // 编辑
  const edit = (index, row) => {
    console.log(row)
  }

  // 删除
  const del = () => {
    console.log('del:', idArr)
  }
</script>

<template>
  <h3>表格</h3>
  <el-table :data="data.arr" border height="300" style="width: 800px;">
    <el-table-column prop="id" label="编号" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="web" label="网站" width="300"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
  </el-table>

  <h3>多选（type="selection"）</h3>
  <el-table :data="data.arr" border height="300" style="width: 800px;">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="id" label="编号" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="web" label="网站" width="300"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
  </el-table>

  <h3>表格 + 分页</h3>

  <el-button type="primary" @click="del">批量删除</el-button>

  <el-table
    :data="data.arr" 
    border 
    height="300" 
    style="width: 800px;"
    @selection-change="selected"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="id" label="编号" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="web" label="网站" width="300"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>

    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">
            编辑
        </el-button>
        <el-button size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50"></el-pagination>
</template>

<style scoped>

</style>