关于el-table总结

c28n07

已于 2023-03-27 23:10:33 修改

阅读量196

点赞数

文章标签： elementui Powered by 金山文档

于 2023-03-22 15:32:14 首次发布

本文链接：https://blog.csdn.net/c28n07/article/details/129711034

版权

文章详细介绍了如何在Vue.js应用中使用el-table组件来生成表数据、实现多选功能、添加展开行以及处理展开和选中事件。通过created生命周期钩子获取API数据，使用type属性设置选择和展开列，并展示了如何监听expand-change和selection-change事件来管理表格状态。此外，还涵盖了如何获取选中记录和处理父子表格的交互。

摘要由CSDN通过智能技术生成

# 关于el-table总结

关于el-table总结

[toc]

1.生成表数据：created(){ }

// 组件勾子获取api数据
created() {
  this.$api.nesting.getdata().then((res) => {
    // ok表示请求成功的数据
    console.log(res)
    // 把请求到的数据给testDatas数组
    this.tableData = res
  }).catch(function (res) {
    alert(res)
  })
}

2.多选：type="selection"

// 增加一列：type="selection"
<el-table-column type="selection" width="55">

3.展开： type="expand"

// 增加一列：type="expand"
<el-table-column type="expand">

4.判断是否展开：@expand-change

// @expand-change：是否展开事件
<el-table :data="tableData" ref="multipleTable" style="width: 100%" @selection-change="handleSelectionChange"
        @expand-change="handleExpandChange">

// 关于el-table中是否展开的处理
 handleExpandChange(row,rows) {//第一个参数是当前行的数据，第二个参数是当前展开行的数组，注：展开时数组加一收起时数组减一
   //id是表示columnd的列对应数据字段id，点击该列的id与父表数组列id相同时，则isExpand为true，否则为false
   const isExpend = rows.some(r => r.id === row.id)
   //将展开的父表记录赋值给data对象的expandRows字段
   this.expandRows = rows
   //如果父表的某列点击展开，则会
   if (isExpend) {
     console.log("我展开啦！")
   } else {
     return
   }
 }

5.获取选中记录：ref="multipleTable"， this.$refs.multipleSonTable.selection

<el-table :data="tableData" ref="multipleTable" style="width: 100%" @selection-change="handleSelectionChange"
        @expand-change="handleExpandChange">

// 关于el-table是否选中的处理
handleAdd() {
  const expands = this.expandRows
  console.log(this.$refs.multipleTable.selection)

  // 如果父表有展开，则去取选取的记录
  if (expands.length>0) {
    console.log(this.$refs.multipleSonTable.selection)
  }
},

6.源码

<template>
  <div class="container" style="width:100%;">
    <div>
      <el-form :inline="true" size="small">
        <el-form-item>
          <el-button label="新增" type="primary" @click="handleAdd()">查看选中情况</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="shopList">
      <el-table :data="tableData" ref="multipleTable" style="width: 100%" @selection-change="handleSelectionChange"
        @expand-change="handleExpandChange">
        <!-- 列表多选 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <!-- 列表展开 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <!-- 等同于 <template slot-scope="{ row }"> -->
            <!-- 等同于<el-table :data="row.sonData" style="width: 60%;margin-left:20px">   -->
            <!-- 子表 -->
            <el-table :data="props.row.sonData" ref="multipleSonTable" style="width: 60%; margin-left:30px">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column v-for="(value, id, index) in sonColumns" :label="value.name" :prop="value.propName"
                :key="index">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="changeStatus(scope.row)">
                    {{ props.row.status ? "完成" : "修改" }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <!--对外层的表格表头进行了遍历循环 -->
        <el-table-column v-for="(value, key, index) in parentsCloums" :label="value.name" :prop="value.propName"
          :key="index">
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="props">
            {{ props.row.time | dateTimeFormat }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  export default {
    name: 'shopList',
    components: {},

    // 关于el-table中列的日期格式特殊处理
    filters: {
      dateTimeFormat(dateTime) {
        if (!dateTime) {
          return dateTime;
        }
        return moment(dateTime).format("YYYY-MM-DD");
      },
    },
    data() {
      return {
        parentsCloums: [ // 外层table的表头
          {
            name: '序号',
            id: '1',
            propName: 'index'
          }, {
            name: '商品类型',
            id: '2',
            propName: 'type'
          }, {
            name: '商品编号',
            id: '3',
            propName: 'no'
          }, {
            name: '商品名称',
            id: '4',
            propName: 'spname'
          }, {
            name: '食材',
            id: '5',
            propName: 'shicai'
          }, {
            name: '商品价格',
            id: '6',
            propName: 'price'
          }, {
            name: '商品图片',
            id: '7',
            propName: 'pic'
          }, {
            name: '当前库存',
            id: '8',
            propName: 'kucun'
          }, {
            name: '创建时间',
            id: '9',
            propName: 'time'
          }
        ],
        sonColumns: [ // 内层table的表头
          {
            name: '序号',
            id: '1',
            propName: 'index'
          },
          {
            name: '入库时间',
            id: '2',
            propName: 'rkTime'
          },
          {
            name: '入库数量',
            id: '3',
            propName: 'rkNum'
          }
        ],
        // 非Mock数据
        // tableData: [ // 外层table的数据
        //   {
        //     id: 1,
        //     index: '1',
        //     type: '蛋糕',
        //     no: '2315436',
        //     spname: '草莓甜心',
        //     shicai: '草莓，奶油，蛋糕',
        //     price: '¥33.00',
        //     pic: '10333',
        //     kucun: '100',
        //     time: '2022-09-08 12:00:00',
        //     sonData: [ // 把要嵌套的内层table数据，放在父级table的一个字段里
        //       {
        //         index: '1',
        //         rkTime: '2022-09-08 12:00:00',
        //         rkNum: '50',
        //         operation: ''
        //       },
        //       {
        //         index: '2',
        //         rkTime: '2022-09-09 12:00:00',
        //         rkNum: '30',
        //         operation: ''
        //       }
        //     ]
        //   },
        //   {
        //     id: 2,
        //     index: '2',
        //     type: '蛋糕',
        //     no: '2315436',
        //     spname: '草莓甜心',
        //     shicai: '草莓，奶油，蛋糕',
        //     price: '¥33.00',
        //     pic: '10333',
        //     kucun: '100',
        //     time: '2022-09-08 12:00:00'
        //   },
        //   {
        //     id: 3,
        //     index: '3',
        //     type: '蛋糕',
        //     no: '2315436',
        //     spname: '草莓甜心',
        //     shicai: '草莓，奶油，蛋糕',
        //     price: '¥33.00',
        //     pic: '10333',
        //     kucun: '100',
        //     time: '2022-09-08 12:00:00'
        //   }
        // ]
        tableData: [], // mock数据
        multipleSelection: [], //多选
        expandRows: [] // 父表被展开的行记录
      }
    },
    methods: {
      // 表格记录编辑
      changeStatus(val) {
        // const self = this
        console.log(val)
      },

      // 当选择项发生变化时会触发该事件
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      // 关于el-table是否选中的处理
      handleAdd() {
        const expands = this.expandRows
        console.log(this.$refs.multipleTable.selection)

        // 如果父表有展开，则去取选取的记录
        if (expands.length>0) {
          console.log(this.$refs.multipleSonTable.selection)
        }
      },

      // 关于el-table中是否展开的处理
      handleExpandChange(row,rows) {//第一个参数是当前行的数据，第二个参数是当前展开行的数组，注：展开时数组加一收起时数组减一
        //id是表示columnd的列对应数据字段id，点击该列的id与父表数组列id相同时，则isExpand为true，否则为false
        const isExpend = rows.some(r => r.id === row.id)
        //将展开的父表记录赋值给data对象的expandRows字段
        this.expandRows = rows
        //如果父表的某列点击展开，则会
        if (isExpend) {
          console.log("我展开啦！")
        } else {
          return
        }
      }
    },

    // 组件勾子获取api数据
    created() {
      this.$api.nesting.getdata().then((res) => {
        // ok表示请求成功的数据
        console.log(res)
        // 把请求到的数据给testDatas数组
        this.tableData = res
      }).catch(function (res) {
        alert(res)
      })
    }
  }
</script>
<style scoped>
</style>