261 lines
9.9 KiB
Vue
261 lines
9.9 KiB
Vue
<template>
|
|
<div>
|
|
<p>自定义渲染 element-ui 组件</p>
|
|
|
|
<vxe-table
|
|
border
|
|
show-footer
|
|
class="vxe-table-element"
|
|
height="600"
|
|
:loading="loading"
|
|
:data.sync="tableData"
|
|
:footer-method="footerMethod"
|
|
:edit-config="{trigger: 'click', mode: 'cell'}">
|
|
<vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>
|
|
<vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>
|
|
<vxe-table-column prop="name" label="ElInput" min-width="140" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-input v-model="row.name"></el-input>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="age" label="ElInputNumber" width="140" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-input-number v-model="row.age" :max="35" :min="18"></el-input-number>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="sex" label="ElSelect" width="140" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-select v-model="row.sex">
|
|
<el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
</el-select>
|
|
</template>
|
|
<template v-slot="{ row }">{{ getSelectLabel(row.sex, sexList) }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="region" label="ElCascader" width="200" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-cascader v-model="row.region" :options="regionList"></el-cascader>
|
|
</template>
|
|
<template v-slot="{ row }">{{ getCascaderLabel(row.region, regionList) }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="date" label="ElDatePicker" width="200" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-date-picker v-model="row.date" type="date" format="yyyy/MM/dd"></el-date-picker>
|
|
</template>
|
|
<template v-slot="{ row }">{{ formatDate(row.date, 'yyyy/MM/dd') }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="date1" label="ElDatePicker" width="220" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-date-picker v-model="row.date1" type="datetime" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
|
|
</template>
|
|
<template v-slot="{ row }">{{ formatDate(row.date1, 'yyyy-MM-dd HH:mm:ss') }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="date2" label="ElTimePicker" width="200" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-time-select v-model="row.date2" :picker-options="{start: '08:30', step: '00:15', end: '18:30'}">
|
|
</el-time-select>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="rate" label="ElRate" width="200" :edit-render="{type: 'visible'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-rate v-model="row.rate"></el-rate>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="flag" label="ElSwitch" width="100" fixed="right" :edit-render="{type: 'visible'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-switch v-model="row.flag"></el-switch>
|
|
</template>
|
|
</vxe-table-column>
|
|
</vxe-table>
|
|
|
|
<p>调用代码</p>
|
|
|
|
<pre>
|
|
<code class="xml">{{ demoCodes[0] }}</code>
|
|
<code class="javascript">{{ demoCodes[1] }}</code>
|
|
</pre>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import XEUtils from 'xe-utils'
|
|
import XEAjax from 'xe-ajax'
|
|
import hljs from 'highlight.js'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
tableData: [],
|
|
sexList: [],
|
|
regionList: [],
|
|
demoCodes: [
|
|
`
|
|
<vxe-table
|
|
border
|
|
show-footer
|
|
class="vxe-table-element"
|
|
height="600"
|
|
:loading="loading"
|
|
:data.sync="tableData"
|
|
:footer-method="footerMethod"
|
|
:edit-config="{trigger: 'click', mode: 'cell'}">
|
|
<vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>
|
|
<vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>
|
|
<vxe-table-column prop="name" label="ElInput" min-width="140" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-input v-model="row.name"></el-input>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="age" label="ElInputNumber" width="140" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-input-number v-model="row.age" :max="35" :min="18"></el-input-number>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="sex" label="ElSelect" width="140" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-select v-model="row.sex">
|
|
<el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
</el-select>
|
|
</template>
|
|
<template v-slot="{ row }">{{ getSelectLabel(row.sex, sexList) }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="region" label="ElCascader" width="200" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-cascader v-model="row.region" :options="regionList"></el-cascader>
|
|
</template>
|
|
<template v-slot="{ row }">{{ getCascaderLabel(row.region, regionList) }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="date" label="ElDatePicker" width="200" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-date-picker v-model="row.date" type="date" format="yyyy/MM/dd"></el-date-picker>
|
|
</template>
|
|
<template v-slot="{ row }">{{ formatDate(row.date, 'yyyy/MM/dd') }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="date1" label="ElDatePicker" width="220" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-date-picker v-model="row.date1" type="datetime" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
|
|
</template>
|
|
<template v-slot="{ row }">{{ formatDate(row.date1, 'yyyy-MM-dd HH:mm:ss') }}</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="date2" label="ElTimePicker" width="200" :edit-render="{type: 'default'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-time-select v-model="row.date2" :picker-options="{start: '08:30', step: '00:15', end: '18:30'}">
|
|
</el-time-select>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="rate" label="ElRate" width="200" :edit-render="{type: 'visible'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-rate v-model="row.rate"></el-rate>
|
|
</template>
|
|
</vxe-table-column>
|
|
<vxe-table-column prop="flag" label="ElSwitch" width="100" fixed="right" :edit-render="{type: 'visible'}">
|
|
<template v-slot:edit="{ row }">
|
|
<el-switch v-model="row.flag"></el-switch>
|
|
</template>
|
|
</vxe-table-column>
|
|
</vxe-table>
|
|
`,
|
|
`
|
|
export default {
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
tableData: [],
|
|
sexList: [],
|
|
regionList: []
|
|
}
|
|
}
|
|
}
|
|
`
|
|
]
|
|
}
|
|
},
|
|
created () {
|
|
this.loading = true
|
|
setTimeout(() => {
|
|
let list = window.CACHE_DATA_LIST.slice(0, 100)
|
|
this.tableData = list
|
|
this.loading = false
|
|
}, 500)
|
|
this.findSexList()
|
|
this.findRegionList()
|
|
},
|
|
mounted () {
|
|
this.$el.querySelectorAll('pre code').forEach((block) => {
|
|
hljs.highlightBlock(block)
|
|
})
|
|
},
|
|
methods: {
|
|
findSexList () {
|
|
return XEAjax.doGet('/api/conf/sex/list').then(({ data }) => {
|
|
this.sexList = data
|
|
return data
|
|
})
|
|
},
|
|
findRegionList () {
|
|
return XEAjax.doGet('/api/conf/region/list').then(({ data }) => {
|
|
this.regionList = data
|
|
return data
|
|
})
|
|
},
|
|
formatDate (value, format) {
|
|
return XEUtils.toDateString(value, format)
|
|
},
|
|
getSelectLabel (value, list, valueProp = 'value', labelProp = 'label') {
|
|
let item = XEUtils.find(list, item => item[valueProp] === value)
|
|
return item ? item[labelProp] : null
|
|
},
|
|
getCascaderLabel (value, list) {
|
|
let values = value || []
|
|
let labels = []
|
|
let matchCascaderData = function (index, list) {
|
|
let val = values[index]
|
|
if (list && values.length > index) {
|
|
list.forEach(item => {
|
|
if (item.value === val) {
|
|
labels.push(item.label)
|
|
matchCascaderData(++index, item.children)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
matchCascaderData(0, list)
|
|
return labels.join(' / ')
|
|
},
|
|
footerMethod ({ columns, data }) {
|
|
return [
|
|
columns.map((column, columnIndex) => {
|
|
if (columnIndex === 0) {
|
|
return '平均'
|
|
}
|
|
if (['age', 'rate'].includes(column.property)) {
|
|
return XEUtils.mean(data, column.property)
|
|
}
|
|
return '-'
|
|
}),
|
|
columns.map((column, columnIndex) => {
|
|
if (columnIndex === 0) {
|
|
return '和值'
|
|
}
|
|
if (['age', 'rate'].includes(column.property)) {
|
|
return XEUtils.sum(data, column.property)
|
|
}
|
|
return '-'
|
|
})
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/*使用 element-ui 需要覆盖以下样式*/
|
|
.vxe-table-element .vxe-cell > .el-input,
|
|
.vxe-table-element .vxe-cell > .el-input-number,
|
|
.vxe-table-element .vxe-cell > .el-select,
|
|
.vxe-table-element .vxe-cell > .el-cascader,
|
|
.vxe-table-element .vxe-cell > .el-date-editor {
|
|
width: 100%;
|
|
}
|
|
</style>
|