修复: 修复表单
This commit is contained in:
yuanzbz
parent
1d57dd78b8
commit
8fa9c3c4a2
|
|
@ -1,123 +0,0 @@
|
|||
<template>
|
||||
<div class="advancedForm">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:inline="true"
|
||||
:label-position="'right'"
|
||||
:model="formInline"
|
||||
class="form-inline"
|
||||
>
|
||||
<el-row
|
||||
:class="{
|
||||
'not-show': byHeight && !isExpand,
|
||||
}"
|
||||
:gutter="gutterWidth"
|
||||
>
|
||||
<el-col
|
||||
:span="item.span"
|
||||
v-for="(item, index) in columns"
|
||||
:key="item.name"
|
||||
v-show="byHeight ? true : index < showRow * 3 || isExpand"
|
||||
>
|
||||
<el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type === 'input'">
|
||||
<el-input clearable v-model="formInline[item.name]" :placeholder="item.placeholder" />
|
||||
</el-form-item>
|
||||
|
||||
<template v-else-if="item.type === 'date'">
|
||||
<el-form-item :label="item.title" :label-width="labelWidth">
|
||||
<el-date-picker
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model="formInline[item.name]"
|
||||
type="date"
|
||||
:placeholder="item.placeholder"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="search-btn">
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand"
|
||||
>{{ isExpand ? '合并' : '展开'
|
||||
}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
let props = defineProps({
|
||||
// 宽度
|
||||
labelWidth: {
|
||||
default: '100px',
|
||||
},
|
||||
gutterWidth: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
showRow: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
byHeight: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['submit', 'reset'])
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
|
||||
const formInline = reactive({})
|
||||
|
||||
for (let item of props.columns) {
|
||||
formInline[item.name] = null
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
emit('submit', formInline)
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
console.log('formEl', formEl)
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
const keys = Object.keys(formInline)
|
||||
keys.forEach((key) => {
|
||||
formInline[key] = null
|
||||
})
|
||||
emit('reset', formInline)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.advancedForm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.form-inline {
|
||||
flex: 1;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.search-btn {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.not-show {
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'input'" style="width: 100%">
|
||||
<el-form-item :label="config?.label" v-if="config.valueType === 'input'" style="width: 100%">
|
||||
<el-input v-model="value" v-bind="$attrs" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'select'" style="width: 100%">
|
||||
<el-form-item :label="config?.label" v-if="config.valueType === 'select'" style="width: 100%">
|
||||
<el-select v-model="value" v-bind="$attrs" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in config.options"
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'date-picker'" style="width: 100%">
|
||||
<el-form-item :label="config?.label" v-if="config.valueType === 'date-picker'" style="width: 100%">
|
||||
<el-date-picker v-model="value" v-bind="$attrs" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'cascader'" style="width: 100%">
|
||||
<el-form-item :label="config?.label" v-if="config.valueType === 'cascader'" style="width: 100%">
|
||||
<el-cascader v-model="value" v-bind="$attrs" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="config?.label" v-if="config.type === 'time-select'" style="width: 100%">
|
||||
<el-form-item :label="config?.label" v-if="config.valueType === 'time-select'" style="width: 100%">
|
||||
<el-time-select v-model="value" v-bind="$attrs" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,31 +7,28 @@
|
|||
:model="formParams"
|
||||
class="form-inline"
|
||||
>
|
||||
<el-row
|
||||
:class="{
|
||||
'not-show': byHeight && !isExpand,
|
||||
}"
|
||||
:gutter="gutterWidth"
|
||||
>
|
||||
<el-col
|
||||
:span="item.span"
|
||||
v-for="(item, index) in columns"
|
||||
:key="item.name"
|
||||
v-show="byHeight ? true : index < showRow * 3 || isExpand"
|
||||
>
|
||||
<BaseFormItem :key="index" :config="item" v-bind="item.attrs" v-model="item.value" />
|
||||
</el-col>
|
||||
<el-row :class="{ 'not-show': byHeight && !isExpand }" :gutter="gutterWidth">
|
||||
<template v-for="(item, index) in columns">
|
||||
<el-col
|
||||
v-if="item.valueType"
|
||||
:span="item.span"
|
||||
v-show="byHeight ? true : index < showRow * 3 || isExpand"
|
||||
>
|
||||
<BaseFormItem :key="index" :config="item" v-bind="item.attrs" v-model="item.value" />
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="search-btn">
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand" v-if="columns.length > 3">
|
||||
{{ isExpand ? '合并' : '展开'
|
||||
}}<el-icon>
|
||||
{{ isExpand ? '合并' : '展开' }}
|
||||
<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
<arrow-up v-else />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,16 @@
|
|||
<template>
|
||||
<div class="zb-pro-table">
|
||||
<div class="header">
|
||||
<el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
|
||||
<template v-for="(item, index) in formSearchData" :key="index">
|
||||
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
|
||||
<template v-if="item.valueType === 'input'">
|
||||
<el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
|
||||
</template>
|
||||
<template v-if="item.valueType === 'select'">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="formInline[item.name]"
|
||||
:placeholder="`请选择${item.label}`"
|
||||
>
|
||||
<el-option
|
||||
v-for="ite in item.options"
|
||||
:key="ite.value"
|
||||
:label="ite.label"
|
||||
:value="ite.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<div class="search">
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand"
|
||||
>{{ isExpand ? '合并' : '展开'
|
||||
}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
</div>
|
||||
<SearchForm @submit="onSubmit" :columns="baseFormColumns" />
|
||||
</div>
|
||||
|
||||
<!----------底部---------------------->
|
||||
<div class="footer">
|
||||
<!-----------工具栏操作工具----------------->
|
||||
<div class="operator">
|
||||
<slot name="btn"></slot>
|
||||
</div>
|
||||
|
||||
<!-- ------------表格--------------->
|
||||
<div class="table">
|
||||
<el-table
|
||||
|
|
@ -51,22 +21,8 @@
|
|||
:border="true"
|
||||
>
|
||||
<template v-for="item in columns">
|
||||
<el-table-column
|
||||
v-if="item.type"
|
||||
:type="item.type"
|
||||
:width="item.width"
|
||||
:align="item.align != null ? item.align : 'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
/>
|
||||
<el-table-column
|
||||
v-else
|
||||
:prop="item.name"
|
||||
:width="item.width"
|
||||
:align="item.align != null ? item.align : 'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
>
|
||||
<el-table-column v-if="item.type" v-bind="{ ...item }" />
|
||||
<el-table-column v-else v-bind="{ ...item }">
|
||||
<template #default="scope">
|
||||
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
|
||||
<slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
|
||||
|
|
@ -78,7 +34,7 @@
|
|||
<!-- ------------分页--------------->
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
v-model:currentPage="pagination.currentPage"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
|
|
@ -92,7 +48,7 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import SearchForm from '@/components/SearchForm/index.vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
|
@ -112,7 +68,17 @@
|
|||
},
|
||||
})
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
// 过滤调需要进行搜索选择的
|
||||
const baseFormColumns = computed(() => {
|
||||
return props.columns.filter((item) => item.valueType && item.search)
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const currentPage = ref(1)
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
const handleSizeChange = (val: number) => {
|
||||
|
|
@ -120,12 +86,12 @@
|
|||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
currentPage1.value = val
|
||||
pagination.currentPage = val
|
||||
}
|
||||
|
||||
const list = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
return arr.splice((pagination.currentPage - 1) * 10, 10)
|
||||
})
|
||||
|
||||
const listLoading = ref(false)
|
||||
|
|
@ -198,17 +164,8 @@
|
|||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
.search-form {
|
||||
:deep(.advancedForm) {
|
||||
flex: 1;
|
||||
::v-deep {
|
||||
.el-input--default {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
|
|
|
|||
|
|
@ -1,249 +0,0 @@
|
|||
<template>
|
||||
<div class="zb-pro-table">
|
||||
<div class="header">
|
||||
<el-form :inline="true"
|
||||
class="search-form"
|
||||
:model="formInline" ref="ruleFormRef" >
|
||||
<template v-for="(item, index) in formSearchData" :key="index">
|
||||
<el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
|
||||
<template v-if="item.valueType === 'input'">
|
||||
<el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
|
||||
</template>
|
||||
<template v-if="item.valueType === 'select'">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
|
||||
<el-option
|
||||
v-for="ite in item.options"
|
||||
:key="ite.value"
|
||||
:label="ite.label"
|
||||
:value="ite.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<div class="search">
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
<el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
|
||||
<arrow-down v-if="!isExpand" />
|
||||
<arrow-up v-else /> </el-icon
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!----------底部---------------------->
|
||||
<div class="footer">
|
||||
<!-----------工具栏操作工具----------------->
|
||||
<div class="operator">
|
||||
<slot name="btn"></slot>
|
||||
</div>
|
||||
<!-- ------------表格--------------->
|
||||
<div class="table">
|
||||
<el-table
|
||||
class="zb-table"
|
||||
v-loading="loading"
|
||||
@selection-change="(val) => emit('selection-change', val)"
|
||||
:data="list"
|
||||
:border="true"
|
||||
>
|
||||
<template v-for="item in columns">
|
||||
<el-table-column
|
||||
v-if="item.type"
|
||||
:type="item.type"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
/>
|
||||
<el-table-column
|
||||
v-else
|
||||
:prop="item.name"
|
||||
:width="item.width"
|
||||
:align="item.align!=null?item.align:'center'"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span v-if="!item.slot">{{ scope.row[item.name] }}</span>
|
||||
<slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- ------------分页--------------->
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="data.length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
|
||||
let props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const currentPage1 = ref(1)
|
||||
// 收缩展开
|
||||
const isExpand = ref(false)
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
currentPage1.value = val
|
||||
}
|
||||
|
||||
const list = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(props.data))
|
||||
return arr.splice((currentPage1.value - 1) * 10, 10)
|
||||
})
|
||||
|
||||
const listLoading = ref(false)
|
||||
const confirmEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
const cancelEdit = (row) => {
|
||||
row.edit = false
|
||||
}
|
||||
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let obj = {}
|
||||
let search = []
|
||||
for (let item of props.columns) {
|
||||
if (item.inSearch) {
|
||||
obj[item.name] = null
|
||||
}
|
||||
if (item.inSearch) {
|
||||
search.push(item)
|
||||
}
|
||||
}
|
||||
const formSearchData = ref(search)
|
||||
const formInline = reactive(obj)
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
emit('onSubmit', formInline)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
formSearchData.value.forEach((item) => {
|
||||
formInline[item.name] = null
|
||||
})
|
||||
emit('reset')
|
||||
}
|
||||
const deleteAction = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {
|
||||
list.value = list.value.filter((item) => item.id !== row.id)
|
||||
ElMessage.success('删除成功')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
.zb-pro-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
.header{
|
||||
display: flex;
|
||||
padding: 16px 16px 0 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
.search-form{
|
||||
flex: 1;
|
||||
::v-deep{
|
||||
.el-input--default{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search{
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
min-height: 300px;
|
||||
.operator{
|
||||
margin-bottom: 15px
|
||||
}
|
||||
.table{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.zb-table{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
::v-deep{
|
||||
.el-table__header th{
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #252525;
|
||||
}
|
||||
}
|
||||
.pagination{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,105 +3,128 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span style="margin-right: 100px">收缩表单 通过v-show来控制显隐藏</span>
|
||||
<span style="margin-right: 100px"
|
||||
>收缩表单 通过v-show来控制显隐藏 设置 showRow 为number</span
|
||||
>
|
||||
<el-button @click="showRow(2)" type="primary" link>显示两行</el-button>
|
||||
<el-button @click="showRow(1)" type="primary" link>显示一行</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<AdvancedForm :columns="columns" @submit="onSubmit" :showRow="row"/>
|
||||
<AdvancedForm :columns="baseColumns" @submit="onSubmit" :showRow="row" />
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 20px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>收缩表单 通过高度来控制显隐藏</span>
|
||||
<span>收缩表单 通过高度来控制显隐藏 byHeight</span>
|
||||
</div>
|
||||
</template>
|
||||
<AdvancedForm :columns="columns" @submit="onSubmit" :byHeight="true"/>
|
||||
|
||||
<AdvancedForm :columns="baseColumns" @submit="onSubmit" :byHeight="true" />
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup >
|
||||
import AdvancedForm from "@/components/SearchForm/advancedForm/index.vue"
|
||||
import {reactive, ref} from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
let columns = [
|
||||
<script lang="ts" setup>
|
||||
import AdvancedForm from '@/components/SearchForm/index.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
let columns = [
|
||||
{
|
||||
type: 'input',
|
||||
name:"name1",
|
||||
title:'字段1',
|
||||
placeholder: "字段1",
|
||||
valueType: 'input',
|
||||
name: 'name1',
|
||||
label: '字段1',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段1',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
name:"name2",
|
||||
title:'字段2',
|
||||
placeholder: "字段2",
|
||||
valueType: 'date-picker',
|
||||
name: 'name2',
|
||||
label: '字段2',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段2',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name:"name3",
|
||||
title:'字段3',
|
||||
placeholder: "字段3",
|
||||
valueType: 'input',
|
||||
name: 'name3',
|
||||
label: '字段3',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段3',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name:"name4",
|
||||
title:'字段4',
|
||||
placeholder: "字段4",
|
||||
valueType: 'input',
|
||||
name: 'name4',
|
||||
label: '字段4',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段4',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name:"name5",
|
||||
title:'字段5',
|
||||
placeholder: "字段5",
|
||||
span: 8,
|
||||
},{
|
||||
type: 'input',
|
||||
name:"name6",
|
||||
title:'字段6',
|
||||
placeholder: "字段6",
|
||||
span: 8,
|
||||
},{
|
||||
type: 'input',
|
||||
name:"name7",
|
||||
title:'字段7',
|
||||
placeholder: "字段7",
|
||||
span: 8,
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name:"name8",
|
||||
title:'字段8',
|
||||
placeholder: "字段8",
|
||||
span: 8,
|
||||
},{
|
||||
type: 'input',
|
||||
name:"name9",
|
||||
title:'字段9',
|
||||
placeholder: "字段9",
|
||||
span: 8,
|
||||
}
|
||||
]
|
||||
const formValue= ref({})
|
||||
const row = ref(1)
|
||||
const onSubmit = (formInline) => {
|
||||
formValue.value = formInline
|
||||
ElMessage.success(JSON.stringify(formInline))
|
||||
}
|
||||
const showRow = (number)=>{
|
||||
row.value = number
|
||||
}
|
||||
{
|
||||
valueType: 'input',
|
||||
name: 'name5',
|
||||
label: '字段5',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段5',
|
||||
},
|
||||
},
|
||||
{
|
||||
valueType: 'input',
|
||||
name: 'name6',
|
||||
label: '字段6',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段6',
|
||||
},
|
||||
},
|
||||
{
|
||||
valueType: 'input',
|
||||
name: 'name7',
|
||||
label: '字段7',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段7',
|
||||
},
|
||||
},
|
||||
{
|
||||
valueType: 'input',
|
||||
name: 'name8',
|
||||
label: '字段8',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段8',
|
||||
},
|
||||
},
|
||||
{
|
||||
valueType: 'input',
|
||||
name: 'name9',
|
||||
label: '字段9',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '字段9',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const baseColumns = reactive(columns)
|
||||
|
||||
const formValue = ref({})
|
||||
const row = ref(1)
|
||||
const onSubmit = (formInline) => {
|
||||
formValue.value = formInline
|
||||
ElMessage.success(JSON.stringify(formInline))
|
||||
}
|
||||
const showRow = (number) => {
|
||||
row.value = number
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export const baseSearchColumns = [
|
||||
{
|
||||
type: 'input',
|
||||
valueType: 'input',
|
||||
name: 'name1',
|
||||
label: '字段1',
|
||||
span: 8,
|
||||
|
|
@ -11,7 +11,7 @@ export const baseSearchColumns = [
|
|||
},
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
valueType: 'select',
|
||||
name: 'name2',
|
||||
label: '字段2',
|
||||
value: '',
|
||||
|
|
@ -30,7 +30,7 @@ export const baseSearchColumns = [
|
|||
},
|
||||
},
|
||||
{
|
||||
type: 'date-picker',
|
||||
valueType: 'date-picker',
|
||||
name: 'name3',
|
||||
label: '时间',
|
||||
span: 8,
|
||||
|
|
@ -43,7 +43,7 @@ export const baseSearchColumns = [
|
|||
},
|
||||
},
|
||||
{
|
||||
type: 'date-picker',
|
||||
valueType: 'date-picker',
|
||||
name: 'name4',
|
||||
label: '时间秒',
|
||||
span: 8,
|
||||
|
|
@ -56,7 +56,7 @@ export const baseSearchColumns = [
|
|||
},
|
||||
},
|
||||
{
|
||||
type: 'date-picker',
|
||||
valueType: 'date-picker',
|
||||
name: 'name5',
|
||||
label: '时间范围',
|
||||
span: 8,
|
||||
|
|
@ -71,7 +71,7 @@ export const baseSearchColumns = [
|
|||
},
|
||||
},
|
||||
{
|
||||
type: 'time-select',
|
||||
valueType: 'time-select',
|
||||
name: 'name6',
|
||||
label: '时间选择',
|
||||
span: 8,
|
||||
|
|
@ -82,7 +82,7 @@ export const baseSearchColumns = [
|
|||
},
|
||||
},
|
||||
{
|
||||
type: 'cascader',
|
||||
valueType: 'cascader',
|
||||
name: 'name7',
|
||||
label: '级联选择器',
|
||||
span: 8,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
span: 8,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: '姓名',
|
||||
search: true,
|
||||
valueType: 'input',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'age',
|
||||
label: '年龄',
|
||||
align: 'right',
|
||||
span: 8,
|
||||
},
|
||||
{
|
||||
name: 'sex',
|
||||
label: '性别',
|
||||
slot: true,
|
||||
search: true,
|
||||
span: 8,
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '男',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '女',
|
||||
},
|
||||
],
|
||||
valueType: 'select',
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: '价格',
|
||||
search: true,
|
||||
valueType: 'input',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'admin',
|
||||
label: '账号',
|
||||
search: true,
|
||||
valueType: 'input',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'address',
|
||||
label: '地址',
|
||||
search: true,
|
||||
valueType: 'input',
|
||||
width: 180,
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'date',
|
||||
label: '日期',
|
||||
sorter: true,
|
||||
search: true,
|
||||
valueType: 'input',
|
||||
span: 8,
|
||||
attrs: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'province',
|
||||
label: '省份',
|
||||
},
|
||||
{
|
||||
name: 'city',
|
||||
label: '城市',
|
||||
},
|
||||
{
|
||||
name: 'zip',
|
||||
label: '邮编',
|
||||
},
|
||||
{
|
||||
name: 'operation',
|
||||
slot: true,
|
||||
fixed: 'right',
|
||||
label: '操作',
|
||||
width: 200,
|
||||
},
|
||||
]
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<PropTable
|
||||
:loading="loading"
|
||||
@selection-change="selectionChange"
|
||||
:columns="column"
|
||||
:columns="baseColumns"
|
||||
:data="list"
|
||||
@reset="reset"
|
||||
@onSubmit="onSubmit"
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
import * as dayjs from 'dayjs'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { columns } from './constants'
|
||||
const loading = ref(true)
|
||||
const appContainer = ref(null)
|
||||
import PropTable from '@/components/Table/PropTable/index.vue'
|
||||
|
|
@ -85,36 +86,7 @@
|
|||
zip: 200333,
|
||||
})
|
||||
}
|
||||
const column = [
|
||||
{ type: 'selection', width: 60, fixed: 'left' },
|
||||
{ name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
|
||||
{ name: 'age', label: '年龄', align: 'right' },
|
||||
{
|
||||
name: 'sex',
|
||||
label: '性别',
|
||||
slot: true,
|
||||
inSearch: true,
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '男',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '女',
|
||||
},
|
||||
],
|
||||
valueType: 'select',
|
||||
},
|
||||
{ name: 'price', label: '价格', inSearch: true, valueType: 'input' },
|
||||
{ name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
|
||||
{ name: 'address', label: '地址', inSearch: true, valueType: 'input', width: 180 },
|
||||
{ name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input', width: 180 },
|
||||
{ name: 'province', label: '省份', width: 100 },
|
||||
{ name: 'city', label: '城市' },
|
||||
{ name: 'zip', label: '邮编' },
|
||||
{ name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
|
||||
]
|
||||
let baseColumns = reactive(columns)
|
||||
const list = ref(data)
|
||||
|
||||
const formSize = ref('default')
|
||||
|
|
|
|||
Loading…
Reference in New Issue