element ui中表单组件的ref属性

P4-VUE3-Element组件库-表格组件

1.概述

这篇文章继续介绍Element组件库的表格组件，在开发中表格也是常用内容。

2.创建组件

2.1.新建Table.vue

2.2.配置组件路由

2.3.创建组件效果展示

3.表格组件

3.1.表格基本使用

• 
  
• 复制官网表格HTML部分内容

• 

• 
  
• 复制官网表格JS部分内容

• 

• 应用Table.vue

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <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>
</template>

<script>
export default {
  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 弄",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

• 查看网页表格效果

• 表格使用字段介绍

4.表格常用属性设置

• 基础表格
  在 Table 组件中，每⼀个表格由⼀个 Table-Column 组件构成，也就是表格的列
• 表格常⽤属性介绍

属性名	作⽤
height	给表格设置⾼度，同时固定表头
show-header	设置是否显示表头
row-class-name	设置⼀个函数或者固定的名字作为⾏的类名
border	是否显示表格竖直⽅向的边框，设置后可通过改变边框设置列宽

• 列常⽤属性介绍

属性名	作⽤
label	当前列的表头名称
prop	传⼊的表格json数据的key值
show-overflow-tooltip	是否设置⽂字超出列宽时悬浮显示完整内容

4.1. 设置表格高度

• 添加表格高度

• 表格高度效果

4.2.设置表格边框

• 表格添加边框

• 添加边框效果

4.3.设置文字超出列宽内容悬浮

• show-overflow-tooltip

• 内容悬浮效果

4.4.自定义内容

查看官网提供的自定义内容例子，表格实现自定义内容的原理就是插槽。

• 复制插槽内容

• 复制操作绑定的方法

• 自定义内容效果

• 自定义内容完整代码

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" height="300px" border>
      <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="地址" show-overflow-tooltip>
      </el-table-column>
      
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  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: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
};
</script>

<style lang="scss" scoped>
</style>

4.5.封装表格

通过封装可以减少表格代码代码数量，优化代码结构。

• 表格封装思路

• 表格封装实现效果

• 表格封装完整代码

<template>
  <div>
    <!--     
    <el-table :data="tableData" style="width: 100%" height="300px" border>
      <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="地址" show-overflow-tooltip>
      </el-table-column>
      
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     -->

    <!-- 封装表格  -->
    <el-table :data="tableData">
      <el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val" width="180"> </el-table-column>

      <!-- 通过判断传入的ifShowOperate来展示是否显示操作列 -->
       <el-table-column label="操作" v-if="ifShowOperate">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  props: {
    ifShowOperate: {
      type: Boolean,
      default: true
    }
  },
  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 弄",
        },
      ],
      tableLabel: {
        date: '日期',
        name: '姓名',
        address: '地址'
      }
    };
  },
   methods: {
      handleEdit(index, row) {
        console.log(index, row);
        // 通过自定义事件将操作内容传递给父组件
        this.$emit('edit',row)
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$emit('del',row)
      }
    }
};
</script>

<style lang="scss" scoped>
</style>