ElementUI之表格-EW帮帮网

文章目录

使用ElementUI
- 使用在线引入的方式
表格
1. 带状态表格row-class-name="Function({row, rowIndex})/String"
2. 固定表头(height="string/number"属性)
获取一行信息slot-scope="scope"
- 使用对象传递
- 解构对象传递
固定列(fixed)
流体高度(max-height)
- 流体高度(max-height)和固定表头(height)的区别
多级表头
单选
多选
- 显示不全提示属性tooltip-effect
- 多选属性 type="selection"
排序

使用ElementUI

使用在线引入的方式

由于ElementUI是**基于Vue2的组件库**，所以在线引入需要先引入Vue2，在去引入ElementUI。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引入Element组件</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app" >
    <el-button type="primary">主要按钮</el-button>

  </div>


</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {

      }
    },
    methods: {
      
    }
  })
</script>

</html>

演示
在这里插入图片描述

表格

官网网址：ElementUI表格

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引入Element组件</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<body>



  <div id="app">

    <table>
      <tr>
        <th>日期</th>
        <th>姓名</th>
        <th>地址</th>
      </tr>
      <tr v-for="item in tableData" :key="item.date">
        <td>{{item.date}}</td>
        <td>{{item.name}}</td>
        <td>{{item.address}}</td>
      </tr>
    </table>


    <!-- el-table是ElementUI 提供的表格组件的标签 相当于table标签-->
    <!-- :data是绑定数据，tableData是data中的数据 <img :src="变量">的src属性也是这样绑定的。-->
    <!-- style是设置样式，width是设置宽度 -->
    <!-- stripe属性是使用带斑马纹的表格，可以更容易区分出不同行的数据 -->
    <!-- border属性: 会给表格加上边框 -->
    <!-- :row-class-name="tableRowClassName" 是绑定方法，tableRowClassName是方法名 注意不能和stripe属性一起使用 -->
    <el-table 
      :data="tableData" 
      style="width: 100%" 
      border 
      :row-class-name="tableRowClassName">

      <!-- el-table-column标签 这个相当于 <tr></tr>标签 -->
      <!-- label属性相当于th标签 -->
      <!-- prop属性相当于 每一列的 td标签 -->
      <!-- width属性相当于td标签的宽度 -->
      <el-table-column prop="date" label="生日" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>

    </el-table>

  </div>


</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]

      }
    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        
        if (rowIndex === 1) {
          return 'warning-row';
          console.log(row);
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
  })
</script>

</html>

1. 带状态表格row-class-name=“Function({row, rowIndex})/String”

2. 固定表头(height="string/number"属性)

2.1 属性的取值

数值类型（如 height=“300”）：单位默认为 px，表格高度固定为 300px，内容超出时自动出现垂直滚动条，表头保持固定。
```
<el-table :data="tableData" height="300"> ... </el-table>
```
字符串类型（如 height=“100%”）：高度值直接绑定到 style.height，表格高度受父容器样式控制。需确保父容器有明确高度（如 100vh或固定 px），否则可能失效。

2.2 动态响应式高度

结合 Vue 的响应式变量动态调整高度：

使用

<el-table :height="tableHeight"> ... </el-table>

data() { return { tableHeight: 400 }; },
mounted() {
  // 根据窗口变化动态计算高度
  window.addEventListener('resize', () => {
    this.tableHeight = window.innerHeight * 0.6;
  });
}

演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定表头</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>

</style>

<body>
  <div id="app">
    <el-table :data="tableData" :height="tableHeight" border style="width: 50%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableHeight: 400
      }
    },
    methods: {

    },
    mounted() {
      // 根据窗口变化动态计算高度
      window.addEventListener('resize', () => {
        this.tableHeight = window.innerHeight * 0.6;
        console.log(11);
      });
    }
  })
</script>

</html>

在这里插入图片描述

2.3 自定义滚动条样式

自定义滚动条样式通过 CSS 覆盖默认样式（仅支持 Webkit 内核浏览器）

.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  background: #f1f1f1; 
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #888; 
}

在这里插入图片描述

2.4 表头高度定制

表头高度定制使用 CSS 调整表头行高（默认高度为 40px）

.el-table th.el-table__cell {
  height: 80px !important; /* 自定义高度 */
  vertical-align: middle; /* 内容垂直居中 */
}

在这里插入图片描述

获取一行信息slot-scope="scope"

Vue2获取一行的信息使用的是作用插槽slot-scope="scope"

Vue 2：使用 slot-scope="scope"是标准写法。
Vue 3：废弃 slot-scope，改用 v-slot或 #default（如 <template #default=“{ row }”>）。若项目升级到 Vue 3，建议迁移至新语法。

使用对象传递

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定表头</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

.el-table th.el-table__cell {
  height: 80px !important; /* 自定义高度 */
  vertical-align: middle; /* 内容垂直居中 */
}
</style>

<body>
  <div id="app">
    <el-table :data="tableData" :height="tableHeight" border style="width: 50%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableHeight: 400
      }
    },
    methods: {
      handleEdit(scope) {
        console.log(scope);
      }
    },
    mounted() {
      // 根据窗口变化动态计算高度
      window.addEventListener('resize', () => {
        this.tableHeight = window.innerHeight * 0.6;
        console.log(11);
      });
    }
  })
</script>


</html>

点击第一个编辑 按钮结果如下：在这里插入图片描述
所以我们一般传入两个值

	<el-table :data="tableData" :height="tableHeight" border style="width: 50%">
     ......
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      ....
    </el-table>

methods: {
      handleEdit(i,row) {
        console.log(i,row);
      }
    },

在这里插入图片描述

解构对象传递

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定表头</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

.el-table th.el-table__cell {
  height: 80px !important; /* 自定义高度 */
  vertical-align: middle; /* 内容垂直居中 */
}
</style>

<body>
  <div id="app">
    <el-table :data="tableData" :height="tableHeight" border style="width: 50%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{  $index, row }">
          <el-button @click="handleEdit($index, row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableHeight: 400
      }
    },
    methods: {
      handleEdit(i,row) {
        console.log(i,row);
      }
    },
    mounted() {
      // 根据窗口变化动态计算高度
      window.addEventListener('resize', () => {
        this.tableHeight = window.innerHeight * 0.6;
        console.log(11);
      });
    }
  })
</script>

</html>

固定列(fixed)

横向内容过多时，可选择固定列。
属性：fixed
作用：列是否固定在左侧或者右侧，true 表示固定在左侧
取值类型：string, boolean
取值：true, left, right

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定表头</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <el-table :data="tableData" border style="width: 50%" >
<!-- fixed == fixed="left" -->
      <el-table-column prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column fixed prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    },
    methods: {

    },
    mounted() {

    }
  })
</script>


</html>

流体高度(max-height)

通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定表头</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <el-table :data="tableData" border max-height="200" style="width: 50%">
      <!-- fixed == fixed="left" -->
      <el-table-column prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column fixed prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    


  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    },
    methods: {

    },
    mounted() {

    }
  })
</script>


</html>

流体高度(max-height)和固定表头(height)的区别

max-height：当小于指定高度，高度会变小
在这里插入图片描述

height：当小于指定高度，高度会有留白，不会变小
在这里插入图片描述

多级表头

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定表头</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <el-table :data="tableData" style="width: 100%">
      <!-- 一级 日期列 -->
      <el-table-column prop="date" label="日期" width="150">
      </el-table-column>

      <!-- 一级 配送信息列 -->
      <el-table-column label="配送信息">
        <!-- 二级 姓名 -->
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>

        <!-- 二级 地址 -->
        <el-table-column label="地址">

          <!-- 三级 省份 市区 地址 邮编  -->
          <el-table-column label="省份">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>

        </el-table-column>
      
      </el-table-column>

    </el-table>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },
    methods: {

    },
    mounted() {

    }
  })
</script>


</html>

单选

@current-change=“handleCurrentChange”

在了解之前我们先来学习@current-change="handleCurrentChange"方法
这个方法用于监听用户点击了表格的哪一行数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单选</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <!-- current-change事件来管理选中时触发的事件，
    它会传入currentRow，oldCurrentRow。 -->
    <el-table ref="singleTable" :data="tableData" 
       @current-change="handleCurrentChange"
      style="width: 50%">
      <!-- 如果需要显示索引，可以增加一列el-table-column，
          设置type属性为index即可显示从 1 开始的索引号 -->
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column property="date" label="日期" width="120">
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column property="address" label="地址">
      </el-table-column>
    </el-table>

  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleCurrentChange(currentRow, oldCurrentRow) {
        console.log("当前行",currentRow);// 当前点击的行数据
        console.log("上一次点击的行",oldCurrentRow);// 上一次点击的行数据
      }
    }

  })
</script>

</html>

在这里插入图片描述

鼠标点击哪一行哪一行变色highlight-current-row

highlight-current-row 是否要高亮当前行 boolean — false

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单选</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <!-- Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。-->
    <el-table ref="singleTable" :data="tableData" highlight-current-row
       @current-change="handleCurrentChange"
      style="width: 50%">
      <!-- 如果需要显示索引，可以增加一列el-table-column，
          设置type属性为index即可显示从 1 开始的索引号 -->
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column property="date" label="日期" width="120">
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column property="address" label="地址">
      </el-table-column>
    </el-table>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      }
    },
    methods: {
      handleCurrentChange(currentRow, oldCurrentRow) {
        console.log("当前行",currentRow);// 当前点击的行数据
        console.log("上一次点击的行"+oldCurrentRow);// 上一次点击的行数据
      }
    }

  })
</script>

</html>

在这里插入图片描述

用于单选表格setCurrentRow

方法：setCurrentRow
作用：用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
传参：row
条件：需要和highlight-current-row搭配使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单选</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <!-- Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。-->
    <el-table ref="singleTable" :data="tableData" highlight-current-row
       @current-change="handleCurrentChange"
      style="width: 50%">
      <!-- 如果需要显示索引，可以增加一列el-table-column，
          设置type属性为index即可显示从 1 开始的索引号 -->
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column property="date" label="日期" width="120">
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column property="address" label="地址">
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="selectTwo(tableData[1])">选中第二行</el-button>
      <el-button @click="selectTwo()">取消选择</el-button>
    </div>
  </div>



</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentRow: null
      }
    },
    methods: {
      selectTwo(currentRow) {
        // 使用
        this.$refs.singleTable.setCurrentRow(currentRow);
      },
    }

  })
</script>


</html>

综合使用

点击按钮选中，并选中把第二行数据存起来，

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单选</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <!-- Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。
     之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。
      -->
    <el-table ref="singleTable" :data="tableData" highlight-current-row
       @current-change="handleCurrentChange"
      style="width: 50%">
      <!-- 如果需要显示索引，可以增加一列el-table-column，
          设置type属性为index即可显示从 1 开始的索引号 -->
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column property="date" label="日期" width="120">
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column property="address" label="地址">
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="selectTwo(tableData[1])">选中第二行</el-button>
      <el-button @click="selectTwo()">取消选择</el-button>
    </div>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentRow: null
      }
    },
    methods: {
      selectTwo(currentRow) {
        // 设置当前行
        this.$refs.singleTable.setCurrentRow(currentRow);
      },
      // a:当前行 b:上一次行
      handleCurrentChange(a, b) {
        // 当selectTwo被点击，执行this.$refs.singleTable.setCurrentRow(currentRow);时
        // 会触发本函数handleCurrentChange
        // 把值存起来便于后续操作
        this.currentRow = a;
        console.log(this.currentRow);
      }
    }

  })
</script>


</html>

在这里插入图片描述

多选

显示不全提示属性tooltip-effect

提示属性：tooltip-effect
取值：dark/light
触发场景：只有内容过被隐藏时，鼠标放到被隐藏的内容上面才会触发，必须配合show-overflow-tooltip才会生效。

show-overflow-tooltip作用：当内容过长被隐藏时显示 tooltip
show-overflow-tooltip值类型：Boolean

<el-table :data="tableData" 
      tooltip-effect="dark" 
      style="width: 30%">
      ......
      <el-table-column 
      	prop="address" 
      	label="地址"
      	show-overflow-tooltip>
      </el-table-column>
</el-table>

在这里插入图片描述

多选属性 type=“selection”

表格事件selection-change
作用：当选择项发生变化时会触发该事件
参数：被选择的数据数组
使用：

<div id="app">
  <el-table ref="multipleTable" :data="tableData" 
    tooltip-effect="dark" style="width: 30%"
    @selection-change="handleSelectionChange">
    .....
  </el-table>
</div>

<script>
  new Vue({
    el: '#app',
    data() { },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  })
</script>

表格方法：clearSelection
作用：用于多选表格，清空用户的选择
参数：无
使用：this.$refs.multipleTable.clearSelection();

表格方法：toggleRowSelection
作用：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
参数：row, selected
使用：this.$refs.multipleTable.clearSelection(row [,selected]);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多选</title>

  <!-- 引入Element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>

</style>

<body>
  <div id="app">
    <!--  @selection-change="handleSelectionChange"
      当选择项发生变化时会触发该事件 -->
    <el-table ref="multipleTable" :data="tableData" 
      tooltip-effect="dark" style="width: 30%"
      @selection-change="handleSelectionChange">
      <!-- 这里添加 一个type="selection" 用于选中 -->
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <!-- 点击选中第二、三条数据 -->
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">
        切换第二、第三行的选中状态
      </el-button>
      <!-- 取消选择的第二、三条数据 -->
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>



</body>
<!-- 引入Vue2语法 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    methods: {
      toggleSelection(rows) {
        console.log(rows);
        if (rows) {
          rows.forEach(row => {
            // 此方法是把传入的行数据 选中
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          // 当没有传值，即取消选择：rows==undefined 清空选项
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        console.log(val);
        // val为当前选中行的数据
        this.multipleSelection = val;

      }
    }
  })
</script>


</html>

排序

对表格进行排序，可快速查找或对比数据。

ElementUI之表格

文章目录

使用ElementUI

使用在线引入的方式

表格

1. 带状态表格row-class-name=“Function({row, rowIndex})/String”

2. 固定表头(height="string/number"属性)

2.1 属性的取值

2.2 动态响应式高度

使用

演示

2.3 自定义滚动条样式

2.4 表头高度定制

获取一行信息slot-scope="scope"

使用对象传递

解构对象传递

固定列(fixed)

流体高度(max-height)

流体高度(max-height)和固定表头(height)的区别

多级表头

单选

@current-change=“handleCurrentChange”

鼠标点击哪一行哪一行变色highlight-current-row

用于单选表格setCurrentRow

综合使用

多选

显示不全提示属性tooltip-effect

多选属性 type=“selection”

排序

网站公告

今日签到

热门文章

最新发布

ElementUI之表格

文章目录

使用ElementUI

使用在线引入的方式

表格

1. 带状态表格row-class-name=“Function({row, rowIndex})/String”

2. 固定表头(height="string/number"属性)

2.1 属性的取值

2.2 动态响应式高度

使用

演示

2.3 ​​自定义滚动条样式​​

2.4 表头高度定制

获取一行信息slot-scope="scope"​​

使用对象传递

解构对象传递

固定列(fixed)

流体高度(max-height)

流体高度(max-height)和固定表头(height)的区别

多级表头

单选

@current-change=“handleCurrentChange”

鼠标点击哪一行哪一行变色highlight-current-row

用于单选表格setCurrentRow

综合使用

多选

显示不全提示属性tooltip-effect

多选属性 type=“selection”

排序

网站公告

今日签到

热门文章

最新发布

2.3 自定义滚动条样式

获取一行信息slot-scope="scope"