ElementUI--Table

Posted 2023-03-01

参考技术A ```

<template>

  <div>

    <el-row :gutter="10">

      <el-col :span="6">

        <el-button type="primary" size="mini"  @click="handleSelection"

          >获取选中的行</el-button

        >

      </el-col>

    </el-row>

     <!-- el-row :gutter：分栏间隔 -->

    <!-- el-col :offset：分栏偏移 -->

    <!-- el-row type="flex"对齐方式 -->

    <el-table

      :data="tableData"

      border

      stripe

      height="300px"

      style="width: 100%"

       @selection-change="handleSelectionChange"

    >

       <!-- 通过:data属性--绑定数据 -->

      <!-- border：竖向边框 -->

      <!-- stripe：斑马线效果，即隔行换色效果 -->

      <!-- height：固定表头，即固定表格table的高度，超出显示滚动条，在内部滚动 -->

      <!-- @selection-change="handleSelectionChange" => 获取到当前选中的行 -->

      <el-table-column

        header-align="center"

        align="center"

        type="selection"

      ></el-table-column>

      <el-table-column

        header-align="center"

        align="center"

        label="序号"

        type="index"

        width="100"

      >

      </el-table-column>

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

       <!-- fixed="left" -->

       <!-- fixed：固定列，需要固定谁就给谁添加，left/right -->

      <!-- prop：用来决定展示哪一个属性的值；label:设置表格头 -->

      <!-- header-align：表头显示方式 -->

      <!-- align：首列显示方式 -->

      <!-- type：序列号index/多选框selection -->

      <el-table-column label="姓名" prop="name"></el-table-column>

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

      <el-table-column header-align="center" align="center" label="操作">

        <template  slot-scope="scope" >

          <el-button

            type="primary"

            icon="el-icon-edit"

            size="mini"

             @click="handleEiit(scope.row)"

            >编辑</el-button

          >

          <el-button

            type="danger"

            icon="el-icon-delete"

            size="mini"

             @click="handleDelete(scope.row)"

            >删除</el-button

          >

           <!-- scope.row 获取当前行的数据 -->

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default 

  name: "Table",

  methods: 

    handleSelectionChange(value) 

      console.log(value);  //默认会返回，所有选中的行；获取到当前选中的行

      this.selections = value;  //为value赋值

    ,

    handleSelection() 

      console.log(this.selections);  //通过selections事件，不断的去记录当前选中的数据

    ,

    handleEiit(row) 

      console.log(row);

    ,

    handleDelete(row) 

      console.log(row);

    ,

  ,

  data() 

    return 

      selections: [],  //默认没有选择，保存选中数据

      tableData: [

         date: "2020-01-01", name: "小不点儿", address: "河北省保定市" ,

         date: "2020-02-02", name: "张三", address: "河北省保定市" ,

         date: "2020-03-03", name: "王五", address: "河北省保定市" ,

         date: "2020-04-01", name: "李四", address: "河北省保定市" ,

         date: "2020-05-01", name: "赵晴", address: "河北省保定市" ,

         date: "2020-06-01", name: "冯峰", address: "河北省保定市" ,

         date: "2020-07-01", name: "小一", address: "河北省保定市" ,

         date: "2020-08-01", name: "大张", address: "河北省保定市" ,

         date: "2020-09-01", name: "吴助", address: "河北省保定市" ,

      ],

    ;

  ,

;

</script>

```