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 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
原生js实现验证码功能
Mar 16 Javascript
基于JSON数据格式详解
Aug 31 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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获取mysql版本的几种方法小结
2008/03/25 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python实现端口检测的方法
2018/07/24 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
python中有函数重载吗
2020/05/28 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
大学教师师德师风演讲稿
2014/08/22 职场文书
领导参观欢迎词
2015/01/26 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers