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`屬性來實現表格的

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/189063.html