day9_elementPlus2

最新推荐文章于 2025-12-10 10:47:58 发布

原创

最新推荐文章于 2025-12-10 10:47:58 发布 · 471 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

day9_elementPlus2

1.data(数组)组件

1.1table 表格

1.1.1table基本用法

通过自动遍历数组展示数据

:data="tableData" 绑定数组
<el-table-column prop="name" label="名称"> </el-table-column> 指定列

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

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  }
]

</script>

<template>
  <el-table :data="tableData" style="width: 100%">
       <el-table-column prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>

<style scoped>

</style>

1.1.2table样式

隔行变色边框

固定表头: table上加height属性固定高度

<el-table :data="tableData" border height="350" stripe style="width: 100%">

固定列:在column上加fixed属性

注意:如果要固定列效果不能使用列自适应宽度需要指定宽度

左固定

<el-table-column fixed prop="date" label="日期" width="180"> </el-table-column>

右固定

<el-table-column fixed="right" prop="address" label="地址" width="280"> </el-table-column>

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

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  }
]

</script>

<template>
  <el-table :data="tableData" border height="350" stripe  style="width: 100%">
       <el-table-column fixed prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column fixed  prop="name" label="名称" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>

        <el-table-column prop="address" label="地址" width="280"> </el-table-column>

        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column fixed="right" prop="address" label="地址" width="280"> </el-table-column>

  </el-table>
</template>

<style scoped>

</style>

1.1.3table选择

1.3.1单选

注意:

1.highlight-current-row 选中样式

2.增加 @current-change="handleCurrentChange" 可以选中被选到的数据

const handleCurrentChange = (val)=>{
    console.log("选中了一行",val);
    currentRow = val
}

3.如果要跨函数使用注意加中间变量

let currentRow ={}

const handleCurrentChange = (val)=>{
    console.log("选中了一行",val);
    currentRow = val
}

const myDelete = ()=>{
    console.log("删除");
    console.log(currentRow);
    
}

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

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',