代码如下(示例):
<template>
<div class="box">
<el-date-picker v-model="time" type="date" placeholder="选择日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOption">
</div>
</template>
<script>
export default {
data(){
return {
pickerOption: {
disabledDate(date) {
return date.getTime() <= Date.now();
}
}
}
}
}
</script>
代码如下(示例):
<el-select v-model="value" placeholder="请选择" multiple clearable @change="$forceUpdate()">
<el-option v-for="(item) in Options" :key="item.value" :label="item.label" :value="item.vauue"></el-option>
</el-select>
代码如下(示例):
<template>
<el-dialog :title="title" :visible.sync="open" append-to-body class="role_dialog">
</el-dialog>
</template>
<style lang="scss">
.role_dialog {
.el-dialog {
display: flex;
flex-direction: column;
max-height: calc(100% - 150px);
max-width: calc(100% - 100px);
}
.el-dialog__body {
overflow: auto;
}
}
</style>
代码如下(示例):
<template>
<div class="select_tree">
<el-select v-model="value" ref="select" :placeholder="placeholder">
<el-option :value="value" style="height: 100%;background: #fff;padding: 8px;margin-top: 0px;">
<el-tree :data="data" ref="tree" :props="defaultProps" default-expand-all :expand-on-click-node='false' @node-click="handleNodeClick" style="font-weight: 500;"></el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'select-tree',
data() {
return {
value: '',
placeholder: '',
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1',
},
],
},
],
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1',
},
],
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1',
},
],
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
methods: {
handleNodeClick(data) {
this.value = data.label
// 隐藏下拉框
this.$refs.select.blur()
},
},
}
</script>
代码如下(示例):
<template>
<div class="box">
<el-input v-model="fullName" placeholder="输入关键字进行过滤" clearable size="small" @input="handleSelect" />
<div class="tree_container" >
<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :highlight-current="true" :expand-on-click-node='false' :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree">
</el-tree>
</div>
</div>
</template>
<script>
export default {
name: 'obox',
data() {
return {
fullName: '',
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1',
},
],
},
],
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1',
},
],
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1',
},
],
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
}
},
methods: {
/**
* 点击节点
*/
handleNodeClick(data) {
},
handleSelect() {
this.$refs.tree.filter(this.fullName)
},
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
},
}
</script>
代码如下(示例):
<template>
<div>
<el-cascader ref="cascader" v-model="areaNodes" :props="areaProps" @change="handleChange($event)"></el-cascader>
</div>
</template>
<script>
export default {
data(){
return {
areaNodes:[],
areaProps: { // 配置节点
lazy: true, // 是否动态加载子节点,需与 lazyLoad 方法结合使用
lazyLoad: this.lazyLoad, // 加载动态数据的方法,仅在 lazy 为 true 时有效
value: 'areaCode', // 指定选项的值为选项对象的某个属性值
label: 'areaName', // 指定选项标签为选项对象的某个属性值
},
}
},
methods:{
lazyLoad(node, resolve) { // node为当前点击的节点,resolve为数据加载完成的回调(必须调用)
if (node.level == 0) {
this.selectArea(node, {}).then((res) => resolve(res))
} else {
this.selectArea(node, node.value).then((res) => resolve(res))
}
},
selectArea(node, parentCode) {
// 这里的 selectArea 为后台接口,通过 parentCode 参数查询 省市区
return selectArea({ parentCode: parentCode })
.then((res) => {
if (res.code == 200) {
return res.data.map((value, i) => ({
areaCode: value.areaCode,
areaName: value.areaName,
leaf: node.level >= 2,
}))
}
})
.catch((err) => {
console.log(err)
})
},
// 获取选中的节点
handleChange(event) {
let checkNode = this.$refs.cascader.getCheckedNodes()[0]
},
}
}
</script>
代码如下(示例):
this.$nextTick(() => {
this.$refs.table.doLayout(); //解决表格错位
});
实际工作中,我们可能会更改某些功能或者样式之类,但是官方又没有提供相对应的功能属性,所以我们就需要更改源码;
Element git :https://github.com/ElemeFE/element
table 合并单元格:
用rowIndex, columnIndex 找到要合并的开始单元格
return {rowspan: 1,colspan: 1 } 表示表格不变
return {rowspan: 2,colspan: 1 } 表示表格向下合并一个单元格
return {rowspan: 1,colspan: 2 } 表示表格向右合并一个单元格
return {rowspan: 0,colspan: 0 } 表示删除此单元格
@media only screen and (max-width: 1920px) {
.box {
width: 12% !important;
}
}
@media only screen and (min-width: 1440px) and (max-width: 1680px) {
.box {
width: 14% !important;
}
}
@media only screen and (min-width: 1280px) and (max-width: 1440px) {
.box {
width: 13% !important;
}
}
.cust::-webkit-scrollbar{
width: 4px'
}
.cust::-webkit-scrollbar-thumb{
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,0,2);
background: rgba(0,0,0,0,2)
}
.cust::-webkit-scrollbar-track{
border-radius: 0;
box-shadow: inset 0 0 5px rgba(0,0,0,0,2);
background: rgba(0,0,0,0,1)
}