elementui导出表格全面解析

一、elementui表格

elementui表格是一款基于Vue.js2.0的组件库，提供了丰富的表格组件，使表格数据的呈现更加直观清晰。同时，elementui表格组件还提供了导出表格的功能。

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2022-01-01',
        name: '张三',
        address: '北京市朝阳区'
      }, {
        date: '2022-01-02',
        name: '李四',
        address: '北京市海淀区'
      }, {
        date: '2022-01-03',
        name: '王五',
        address: '北京市西城区'
      }]
    }
  }
}
</script>

二、elementui表格多选默认勾选

在elementui表格中，我们可以通过配置`default-selection`属性来设置表格默认选中的数据。

<template>
  <el-table
    :data="tableData"
    :default-selection="[tableData[1], tableData[2]]"
    selection-key="name"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"></el-table-column>
    <el-table-column
      prop="date"
      label="日期"></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"></el-table-column>
    <el-table-column
      prop="address"
      label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2022-01-01',
        name: '张三',
        address: '北京市朝阳区'
      }, {
        date: '2022-01-02',
        name: '李四',
        address: '北京市海淀区'
      }, {
        date: '2022-01-03',
        name: '王五',
        address: '北京市西城区'
      }]
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
    }
  }
}
</script>

三、elementui表格错位

elementui表格组件中，如果表格数据呈错位情况，可以通过设置表格的`height`属性或者给表格加上样式`style="width:100%"`来解决。

<template>
  <el-table :data="tableData" height="350">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

四、elementui复杂表格

在elementui表格组件中，我们可以通过自定义表头和表格列的形式，实现复杂表格的呈现。下面是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期">
      <template slot-scope="scope">
        <el-row :class="{'is-disabled': scope.row.disabled}" :style="{width: '100%'}">
          <el-col :span="10">
            {{ scope.row.date }}
          </el-col>
          <el-col :span="14" v-if="scope.row.disabled">
            {{ scope.row.disabled }}
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column label="姓名">
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="地址">
      <template slot-scope="scope">
        {{ scope.row.address }}
      </template>
    </el-table-column>
  </el-table>
</template>

五、elementui表格数据刷新

在使用elementui表格组件的过程中，有时需要动态更新表格数据。我们可以通过监听数据变化的方式，在数据变化后通过重新设置表格的`data`属性来实现表格数据的刷新。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="refresh">点击刷新</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2022-01-01',
        name: '张三',
        address: '北京市朝阳区'
      }, {
        date: '2022-01-02',
        name: '李四',
        address: '北京市海淀区'
      }, {
        date: '2022-01-03',
        name: '王五',
        address: '北京市西城区'
      }]
    }
  },
  methods: {
    refresh() {
      this.tableData = [{
        date: '2022-02-01',
        name: '张三',
        address: '北京市朝阳区'
      }, {
        date: '2022-02-02',
        name: '李四',
        address: '北京市海淀区'
      }, {
        date: '2022-02-03',
        name: '王五',
        address: '北京市西城区'
      }]
    }
  }
}
</script>

六、elementui表格渲染不上数据

在使用elementui表格组件的过程中，有时会出现表格数据无法渲染的情况。这可能是由于表格的列属性和表格数据的属性不一致引起的。需要检查并调整表格的列属性和表格数据的属性，保持一致才能正确呈现表格数据。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <!-- 如果表格数据的属性名称为 "addr"，则列属性也应该为 "addr"，否则会渲染不出数据 -->
    <el-table-column prop="addr" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2022-01-01',
        name: '张三',
        address: '北京市朝阳区',
        addr: '北京市朝阳区'
      }, {
        date: '2022-01-02',
        name: '李四',
        address: '北京市海淀区',
        addr: '北京市海淀区'
      }, {
        date: '2022-01-03',
        name: '王五',
        address: '北京市西城区',
        addr: '北京市西城区'
      }]
    }
  }
}
</script>

七、elementui表格合并单元格

在处理一些特定场景的表格数据时，我们可能需要合并一些相邻的单元格。在elementui表格组件中，我们可以通过设置不同单元格的`rowspan`和`colspan`属性，来实现单元格的合并。下面是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2022-01-01',
        name: '张三',
        address: '北京市朝阳区',
        rowspan: 2,
        colspan: null
      }, {
        date: '2022-01-02',
        name: '李四',
        address: '北京市海淀区',
        rowspan: null,
        colspan: 2
      }, {
        date: '2022-01-03',
        name: '王五',
        address: '北京市西城区',
        rowspan: 1,
        colspan: null
      }]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  }
}
</script>

八、elementui表格合并列

在elementui表格组件中，我们还可以通过该组件提供的列属性来实现列的合并。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期">
      <template slot-scope="scope">
        {{ scope.row.date }}
      </template>
    </el-table-column>
    <el-table-column label="姓名及地址" :colspan="2">
      <template slot-scope="scope">
        {{ scope.row.name }} - {{ scope.row.address }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2022-01-01',
        name: '张三',
        address: '北京市朝阳区'
      }, {
        date: '2022-01-02',
        name: '李四',
        address: '北京市海淀区'
      }, {
        date: '2022-01-03',
        name: '王五',
        address: '北京市西城区'
      }]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  }
}
</script>

九、elementui表格可编辑

在elementui表格组件中，我们还可以通过设置表格的`edit-config`属性来实现表格的