怎么在vue中使用el-table自定义表头

怎么在vue中使用el-table自定义表头

怎么在vue中使用el-table自定义表头？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

el-table可以通过设置 Scoped slot 来实现自定义表头。

文档说明如下：

代码实现：

<template>   <el-dialog    width="50%"    :visible.sync="isShow"    :before-close="beforeClose"    title="自定义设备类型属性">    <div class="dialogDiv">     <el-table       :data="tableData.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"        border>      <el-table-column prop="code"        :label="$t('basicData.device.propDlg.code')">      </el-table-column>      <el-table-column prop="maxValue"        :label="$t('basicData.device.propDlg.maxValue')">      </el-table-column>      <el-table-column prop="minValue"        :label="$t('basicData.device.propDlg.minValue')">      </el-table-column>      <el-table-column prop="name"        :label="$t('basicData.device.propDlg.name')">      </el-table-column>      <el-table-column prop="valueType"        :label="$t('basicData.device.propDlg.valueType')">      </el-table-column>      <el-table-column prop="warning"        :label="$t('basicData.device.propDlg.warning')">      </el-table-column>      <el-table-column align="center" width="160px">       <template slot="header" slot-scope="scope">        <el-button v-model="handleAdd"          size="mini"         type="success"         circle plain         icon="el-icon-plus"         @click="handleAdd(scope.$index, scope.row)">              </el-button>       </template>       <template slot-scope="scope">        <el-button         size="mini"         type="primary"         circle plain         icon="el-icon-edit"         @click="handleEdit(scope.$index, scope.row)">        </el-button>        <el-button         size="mini"         type="danger"         circle plain         icon="el-icon-delete"         @click="handleDelete(scope.$index, scope.row)">        </el-button>       </template>      </el-table-column>     </el-table>    </div>    <span slot="footer">     <el-button @click="cancel">{{ $t('common.cancel') }}</el-button>     <el-button @click="confirm" type="primary">{{ $t('common.confirm') }}</el-button>    </span>   </el-dialog>  </template>    <script>  export default {   data() {    return {     tableData: []    }   },   methods: {    // 添加    handleAdd() {    },    // 编辑    handleEdit(index, row) {      },    // 删除    handleDelete(index, row) {    },    cancel() {     this.$emit("cancel")    },    confirm() {     this.$emit("confirm", this.tableData)    }   }  };  </script>    <style lang="scss" scoped>  .dialogDiv {   height: 300px;   overflow: auto;  }  </style>

页面效果如下：

关于怎么在vue中使用el-table自定义表头问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注高防服务器网行业资讯频道了解更多相关知识。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[