ElTableColumn如何自訂內容
- php中世界最好的语言原創
- 2018-06-13 09:49:055881瀏覽
這次帶給大家ElTableColumn如何自訂內容，ElTableColumn自訂內容的注意事項有哪些，以下就是實戰案例，一起來看一下。
公司有一個新的需求，點擊ElTableColumn的頭部可以進行搜索，這個功能同事已經做出來了，但是使用有些不方便，自己就打算封裝成一個組件，學習一下。
ElTableColumn本來就是這個樣子的：
#要做成的是這個樣子：
我直接就放程式碼了，挨著挨著說明太多了。
程式碼的結構：
元件
<!-- ElTableColumnPro.vue -->
<template>
<el-table-column>
<template>
<slot>
<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> <el-table-column-pro> </el-table-column-pro> <el-table-column-pro> </el-table-column-pro> <el-table-column-pro> </el-table-column-pro> <el-table-column-pro></el-table-column-pro> </el-table>
<el-table>
<el-table-column-pro></el-table-column-pro>
<el-table-column-pro>
<template>
<pre class="brush:php;toolbar:false">{{scope.row.content}}
以上是ElTableColumn如何自訂內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Vue的UI元件庫自訂動態元件下一篇：Vue的UI元件庫自訂動態元件