VUE对ElTableColumn进行扩展
这次给大家带来VUE对ElTableColumn进行扩展,VUE对ElTableColumn进行扩展的注意事项有哪些,下面就是实战案例,一起来看一下。
ElTableColumn本来是这个样子的:
要做成的是这个样子:
我直接就放代码了,挨着挨着说明太多了。
代码的结构:
组件
<!-- ElTableColumnPro.vue --> <template> <el-table-column v-if="visible" :formatter="formatter" :align='align' :prop="prop" :header-align="headerAlign" :label="label" :width="width" :render-header="renderHeader" > <template slot-scope="scope"> <slot :row="scope.row" :$index="scope.$index" > <span>{{fomatMethod(scope.row[prop])}}</span> </slot> </template> </el-table-column> </template> <script> import moment from "moment"; export default { name: "el-table-column-pro", props: { prop: { type: String }, label: { type: String }, width: { type: Number }, renderType: { type: String, validator: value => ["date", "input", "select"].includes(value) }, placeholder: { type: String }, rederWidth: { type: String, default: "230px" }, param: { type: String, default: "" }, startDate: { type: String }, endDate: { type: String }, selectList: { type: Array }, isClear: { type: Boolean, default:true }, visible: { type: Boolean, default: true }, filterIcon: { type: String, default: "el-icon-search" }, callback: { type: Function }, formatter: { type: Function, default:(row, column, cellValue)=>cellValue }, align:{ type:String }, headerAlign:{ type:String } }, data() { return { formatD:this.filterIcon }; }, methods: { fomatMethod(value){ return this.formatter('','',value) }, renderHeader(createElement, { column, $index }) { switch (this.renderType) { case "date": return this.renderDate(createElement, { column, $index }); case "input": return this.rederInput(createElement, { column, $index }); case "select": return this.rederSelect(createElement, { column, $index }); default: return column.label; } }, rederInput(createElement, { column, $index }) { return createElement( "p", { class: "filters", style: { color: column.color } }, [ createElement( "el-popover", { props: { placement: "bottom", width: "200", trigger: "click" } }, [ createElement("el-input", { props: { placeholder: this.placeholder, value: this.param }, nativeOn: { keyup: event => { if (event.keyCode === 13) { this.$emit("update:param", event.target.value); this.callback && this.callback(); } } }, on: { blur: event => { this.$emit("update:param", event.target.value); this.callback && this.callback(); } } }), createElement( "span", { slot: "reference" }, [ column.label, createElement("i", { class: this.filterIcon, style: { marginLeft: "4px" } }) ] ) ] ) ] ); }, rederSelect(createElement, { column, $index }) { return createElement( "p", { class: "filters", style: { color: column.color } }, [ createElement( "el-popover", { props: { placement: "bottom", width: "200", trigger: "click" } }, [ createElement( "el-select", { props: { placeholder: this.placeholder, value: this.param, clearable: this.isClear }, on: { input: value => { this.$emit("update:param", value); this.callback && this.callback(); } } }, [ this.selectList.map(item => { return createElement("el-option", { props: { value: item.value, label: item.label } }); }) ] ), createElement( "span", { slot: "reference" }, [ column.label, createElement("i", { class: this.filterIcon, style: { marginLeft: "4px" } }) ] ) ] ) ] ); }, renderDate(createElement, { column, $index }) { return createElement( "p", { class: "filters" }, [ createElement( "el-popover", { props: { placement: "bottom", width: this.rederWidth, trigger: "click" } }, [ createElement("el-date-picker", { props: { placeholder: this.placeholder, value: this.value, type: "daterange", rangeSeparator:"至", startPlaceholder:"开始日期", endPlaceholder:"结束日期", }, style: { width: this.rederWidth }, on: { input: value => { if (value) { const startDate = moment(value[0]).format("YYYY-MM-DD"); const endDate = moment(value[1]).format("YYYY-MM-DD"); this.$emit("update:startDate", startDate); this.$emit("update:endDate", endDate); this.callback && this.callback(); } } } }), createElement( "span", { slot: "reference" }, [ column.label, createElement("i", { class: this.filterIcon, style: { marginLeft: "4px" } }) ] ) ] ) ] ); } } }; </script> <!-- index.js --> import ElTableColumnPro from './ElTableColumnPro' ElTableColumnPro.install = function(Vue) { Vue.component(ElTableColumnPro.name, ElTableColumnPro); }; export default ElTableColumnPro;
安装
import ElTableColumnPro from 'components/ElTableColumnPro/index' ... ... ... Vue.use(ElTableColumnPro)
使用
<el-table :data="bankFlow" style="width:100%" stripe> <el-table-column-pro :visible="showMore" prop="transactionId" label="流水号" :width="120"> </el-table-column-pro> <el-table-column-pro prop="clientCode" label="客户代码 " :width="120" placeholder="请输入客户代码" :callback="requestTransactionLogs" renderType="input" :param.sync="request_params.clientCode"> </el-table-column-pro> <el-table-column-pro prop="eventTypeName" label="事件 " placeholder="请选择事件" :selectList="listEventEnum" :callback="requestTransactionLogs" renderType="select" :param.sync="request_params.event" :width="100"> </el-table-column-pro> <el-table-column-pro prop="createTime" :callback="requestTransactionLogs" :startDate.sync="request_params.startDate" :endDate.sync="request_params.endDate" :formatter="$timeformat" label="时间" renderType="date" :width="180" ></el-table-column-pro> </el-table>
<el-table :data="lists.content" v-loading="loading" @row-dblclick="detail" > <el-table-column-pro :width="120" prop="clientCode" label="客户代码 " align="center" header-align="center" placeholder="请输入客户代码" :callback="getLists" renderType="input" :param.sync="params.clientCode"></el-table-column-pro> <el-table-column-pro label="内容 " placeholder="请输入内容" :callback="getLists" renderType="input" :param.sync="params.content"> <template slot-scope="scope"> <pre class="brush:php;toolbar:false">{{scope.row.content}}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是VUE对ElTableColumn进行扩展的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

PHP的SNMP扩展是一种使PHP能够通过SNMP协议与网络设备进行通信的扩展程序。使用该扩展可以方便地获取和修改网络设备的配置信息,例如路由器、交换机等设备的CPU、内存、网络接口等信息,也可以进行诸如开关设备端口等控制操作。本文将介绍SNMP协议的基础知识、PHP的SNMP扩展的安装方法以及如何在PHP中使用SNMP扩展进行网络设备的监控和控制。一、SN

要扩展PHP函数功能,可以使用扩展和第三方模块。扩展提供附加函数和类,可通过pecl包管理器安装和启用。第三方模块提供特定功能,可通过Composer包管理器安装。实践案例包括使用扩展解析复杂JSON数据和使用模块验证数据。

从头到尾:如何使用php扩展cURL进行HTTP请求引言:在Web开发中,经常需要与第三方API或其他远程服务器进行通信。而使用cURL进行HTTP请求是一种常见而强大的方式。本文将介绍如何使用php扩展cURL来执行HTTP请求,并提供一些实用的代码示例。一、准备工作首先,确保php已安装cURL扩展。可以在命令行执行php-m|grepcurl查

1.UncaughtError:Calltoundefinedfunctionmb_strlen();出现如上错误时,说明我们没装上mbstring扩展;2.进入PHP安装目录cd/temp001/php-7.1.0/ext/mbstring3.启动phpize(/usr/local/bin/phpize或/usr/local/php7-abel001/bin/phpize)命令来安装php扩展4../configure--with-php-config=/usr/local/php7-abel

如何使用极光推送扩展,在PHP应用中实现批量消息推送功能在移动应用的开发中,消息推送是一项非常重要的功能。极光推送是一种常用的消息推送服务,提供了丰富的功能和接口。本文将介绍如何使用极光推送扩展在PHP应用中实现批量消息推送功能。第一步:注册极光推送账号并获取API密钥首先,我们需要在极光推送官网(https://www.jiguang.cn/push)注册

有的用户觉得自己d盘空间不够用,想要扩展一下d盘空间,但是在操作的时候,发现自己的win11d盘扩展不了,扩展卷是灰色的,其实这可能是由于磁盘空间不足导致的,下面一起来看看解决方法吧。win11d盘为什么扩展不了:一、空间不足1、首先,扩展d盘需要保证你的磁盘有“可用空间”,如图所示。2、如果像这样没有可用空间,那自然就没有办法扩展了。3、这时候想要扩展d盘,可以找到其他磁盘,右键选择“压缩卷”4、输入想要扩展的空间进行压缩,再点击“确定”就能获得可用空间了。二、磁盘不相邻1、要扩展一个磁盘,可

PHP是一种流行的服务器端语言,可以用来开发Web应用程序和处理文件。PHP的ZipArchive扩展是一个强大的工具,可以在PHP中操作zip文件。在这篇文章中,我们将介绍如何使用PHP的ZipArchive扩展来创建、读取和修改zip文件。一、安装ZipArchive扩展在使用ZipArchive扩展之前,需要确保已经安装了这个扩展。安装方法如下:1.安

PHP的POSIX扩展是一组允许PHP与POSIX兼容操作系统进行交互的函数和常量。POSIX(PortableOperatingSystemInterface)是一组操作系统接口标准,旨在允许软件开发人员编写可在各种UNIX或UNIX类操作系统上运行的应用程序。本文将介绍如何使用PHP的POSIX扩展,包括安装和使用。一、安装PHP的POSIX扩展在
