Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der ElTableColumn-Erweiterung von VUE in element-ui vor. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.
Das Unternehmen hat eine neue Anforderung. Klicken Sie auf den Kopf von ElTableColumn, um diese Funktion zu suchen, aber ich habe vor, sie in eine Komponente zu kapseln und mehr darüber zu erfahren Es.
ElTableColumn sah ursprünglich so aus:
Was es tun möchte, ist so:
Ich habe den Code einfach direkt eingegeben, es ist zu viel, um ihn nacheinander zu erklären.
Struktur des Codes:
Komponenten
<!-- 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;Nach dem Login kopieren
Installieren Sie
import ElTableColumnPro from 'components/ElTableColumnPro/index'
...
...
...
Vue.use(ElTableColumnPro)
Nach dem Login kopieren
Verwenden Sie
<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>Nach dem Login kopieren
<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}}
Nach dem Login kopieren
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Eine Lösung zum automatischen Hinzufügen von Pre-Tags zum Ajax-Rückgabewert
Ajax verwendet Aktionen mit unterschiedlichen Namespaces Methode
Verwenden Sie Ajax, um eine Vorschau des Links anzuzeigen, und Sie können den Inhalt des Links sehen
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der VUE-Erweiterung von ElTableColumn in element-ui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
