vue+elementUI树形选择框，上传附件，拿来即用；

<template>
  <div style="margin-bottom: 3.75rem;">
    <el-card class="box-card" :body-style="{ padding: '0px' }" style="height: 100%;">
      <div style="margin: 1rem;">
        <el-button type="danger" @click="delRec">删除</el-button>
        <el-button type="primary">刷新</el-button>
      </div>
      <el-table highlight-current-row :key="key" @cell-dblclick="doubleClick"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%;margin: 0.25rem;"
                :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                @selection-change="handleSelectionchange" border>
        <el-table-column type="selection" width="50px"/>
        <el-table-column type="index" label="序号" width="50px"/>
        <el-table-column prop="address" label="标题"/>
        <el-table-column prop="name" label="发件人"/>
        <el-table-column prop="date" label="发送日期"/>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'receiveBox',
  data() {
    return {
      key: Math.random(),
      currentPage: 1,
      pageSize: 5, //    每页的数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1517 弄'
        },  {
          date: '2016-05-04',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1517 弄'
        },  {
          date: '2016-05-04',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1517 弄'
        },  {
          date: '2016-05-04',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1517 弄'
        },  {
          date: '2016-05-04',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1517 弄'
        },  {
          date: '2016-05-04',
          name: '王小虎8',
          address: '上海市普陀区金沙江路 1517 弄'
        },  {
          date: '2016-05-04',
          name: '王小虎9',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎10',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎11',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎12',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎13',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎14',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎15',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎16',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎17',
          address: '上海市普陀区金沙江路 1517 弄'
        },{
          date: '2016-05-01',
          name: '王小虎18',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎19',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎20',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎21',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎22',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎23',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎24',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎25',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎26',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎27',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎28',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎29',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎30',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      selectRec: [],
    }
  },
  created() {
    // this.tableData = []
  },
  methods: {
    delRec(){
      if (this.selectRec.length === 0) {
        this.$message({type:'warning',message:'请先选择记录'})
        return
      }
      this.$message({type:'error',message:'deleted!'})
    },
    // 双击单元格触发事件
    doubleClick(row, column) {
      // 避免点击过快导致多个输入框处于焦点状态
      row[column.property + 'Show'] = false

      // 避免点击其他单元格导致表格刷新
      if (!['address'].includes(column.property)) return
      row[column.property + 'Show'] = true
      this.updateTable()
    },
    //更新表格
    updateTable() {
      this.key = Math.random()
      this.$message({type:'success',message:'dbClick!'})
    },
    handleSelectionchange(selection) {
      console.log(selection);//当前途中的行撒据
      this.selectRec = selection
      // console.log('SELECT: ',this.selectRec)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val // 给页面数量赋值
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val // 给当前页赋值
    }
  },
}
</script>

<style scoped lang="scss">
.box-card {
  height: 100%;
  padding: 0.75rem;
  margin: 0.75rem;
  overflow-y: auto;
  //text-align: center; div居中
}
</style>