vue el-table实现自定义表头


Posted in Javascript onDecember 11, 2019

本文实例为大家分享了vue el-table实现自定义表头的具体代码,供大家参考,具体内容如下

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

文档说明如下:

vue el-table实现自定义表头

代码实现:

<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()))" 
    style="width: 100%" 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实现自定义表头

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
Vue如何获取数据列表展示
Dec 11 #Javascript
vue el-table实现行内编辑功能
Dec 11 #Javascript
Vue.js实现可编辑的表格
Dec 11 #Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 #Javascript
用JS实现一个简单的打砖块游戏
Dec 11 #Javascript
js消除图片小游戏代码
Dec 11 #Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php的4种常见运行方式
2015/03/20 PHP
深入理解PHP中的count函数
2016/05/31 PHP
JavaScript的Cookies
2008/01/16 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
keras 权重保存和权重载入方式
2020/05/21 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
Nginx配置根据url参数重定向
2022/04/11 Servers