Table 表格
条件查询
1.顶部查询查询表单，需要配置 toolbar 属性，在 toolbar 中配置 formConfig（ 参考 FormConfig API），如果想要处理搜索提交的数据，在 formConfig 里添加 beforeRequest 属性
代码示例
vue
<ElPlusTable ref="tableListRef" :tableConfig="table1Config" :isPager="false" />
<ElPlusTable ref="tableListRef" :tableConfig="table2Config" :isPager="false" />
<script lang="ts" setup>
let table1Data = reactive([
{ id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
{ id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' },
{ id: 3, name: '王五', sex: 1, age: 41, address: '上海XXXX' },
{ id: 4, name: '张六', sex: 1, age: 15, address: '成都XXXX' }
])
let table2Data = reactive([
{ id: 1, name: '商品1', price: 10, sellPrice: 15, number: 10 },
{ id: 2, name: '商品2', price: 25, sellPrice: 26, number: 0 },
{ id: 3, name: '商品3', price: 2, sellPrice: 2, number: 2 }
])
const table1Config = ref({
isDialog: true,
fetch: async (postData: any) => {
const queryDataList = []
if (postData.searchKey) {
table1Data.filter((item: any) => {
if (item.name.includes(postData.searchKey)) {
queryDataList.push(item)
}
})
}
const result = { records: table1Data }
return await new Promise((resolve) => {
setTimeout(() => {
if (!postData.searchKey) {
resolve(result)
} else {
resolve(queryDataList)
}
}, 1000)
})
},
column: [
{ prop: 'id', label: 'id' },
{ prop: 'name', label: '名字' },
{ prop: 'sex', label: '性别', format: 'formatSex' },
{ prop: 'age', label: '年龄' },
{ prop: 'address', label: '地址' }
],
toolbar: {
formConfig: {
formDesc: {
searchKey: { type: 'input', label: '输入查询', placeholder: '请输入姓名' }
}
}
}
} as ITableConfig)
const table2Config = ref({
fetch: async (postData: any) => {
console.log(postData)
const queryDataList = []
if (postData.searchKey) {
table2Data.filter((item: any) => {
if (item.price === postData.searchKey) {
queryDataList.push(item)
}
})
}
const result = { records: table2Data }
return await new Promise((resolve) => {
setTimeout(() => {
if (!postData.searchKey) {
resolve(result)
} else {
resolve(queryDataList)
}
}, 1000)
})
},
column: [
{ prop: 'id', label: 'id', minWidth: '120px' },
{ prop: 'name', label: '商品名称', minWidth: '120px' },
{ prop: 'price', label: '价格', format: 'yuan', minWidth: '120px' },
{ prop: 'sellPrice', label: '销售价格', format: 'yuan', minWidth: '120px' },
{ prop: 'number', label: '商品数量', minWidth: '120px' }
],
toolbar: {
formConfig: {
beforeRequest: (data: any) => {
console.log('查询的数据', data)
return data
},
formDesc: {
searchKey: { type: 'number', label: '输入查询', placeholder: '请输入价格', attrs: { precision: 2, step: 0.1, max: 999 } }
}
}
}
} as ITableConfig)
</script><ElPlusTable ref="tableListRef" :tableConfig="table1Config" :isPager="false" />
<ElPlusTable ref="tableListRef" :tableConfig="table2Config" :isPager="false" />
<script lang="ts" setup>
let table1Data = reactive([
{ id: 1, name: '张三', sex: 1, age: 55, address: '北京XXXX' },
{ id: 2, name: '李四', sex: 0, age: 24, address: '深圳XXXX' },
{ id: 3, name: '王五', sex: 1, age: 41, address: '上海XXXX' },
{ id: 4, name: '张六', sex: 1, age: 15, address: '成都XXXX' }
])
let table2Data = reactive([
{ id: 1, name: '商品1', price: 10, sellPrice: 15, number: 10 },
{ id: 2, name: '商品2', price: 25, sellPrice: 26, number: 0 },
{ id: 3, name: '商品3', price: 2, sellPrice: 2, number: 2 }
])
const table1Config = ref({
isDialog: true,
fetch: async (postData: any) => {
const queryDataList = []
if (postData.searchKey) {
table1Data.filter((item: any) => {
if (item.name.includes(postData.searchKey)) {
queryDataList.push(item)
}
})
}
const result = { records: table1Data }
return await new Promise((resolve) => {
setTimeout(() => {
if (!postData.searchKey) {
resolve(result)
} else {
resolve(queryDataList)
}
}, 1000)
})
},
column: [
{ prop: 'id', label: 'id' },
{ prop: 'name', label: '名字' },
{ prop: 'sex', label: '性别', format: 'formatSex' },
{ prop: 'age', label: '年龄' },
{ prop: 'address', label: '地址' }
],
toolbar: {
formConfig: {
formDesc: {
searchKey: { type: 'input', label: '输入查询', placeholder: '请输入姓名' }
}
}
}
} as ITableConfig)
const table2Config = ref({
fetch: async (postData: any) => {
console.log(postData)
const queryDataList = []
if (postData.searchKey) {
table2Data.filter((item: any) => {
if (item.price === postData.searchKey) {
queryDataList.push(item)
}
})
}
const result = { records: table2Data }
return await new Promise((resolve) => {
setTimeout(() => {
if (!postData.searchKey) {
resolve(result)
} else {
resolve(queryDataList)
}
}, 1000)
})
},
column: [
{ prop: 'id', label: 'id', minWidth: '120px' },
{ prop: 'name', label: '商品名称', minWidth: '120px' },
{ prop: 'price', label: '价格', format: 'yuan', minWidth: '120px' },
{ prop: 'sellPrice', label: '销售价格', format: 'yuan', minWidth: '120px' },
{ prop: 'number', label: '商品数量', minWidth: '120px' }
],
toolbar: {
formConfig: {
beforeRequest: (data: any) => {
console.log('查询的数据', data)
return data
},
formDesc: {
searchKey: { type: 'number', label: '输入查询', placeholder: '请输入价格', attrs: { precision: 2, step: 0.1, max: 999 } }
}
}
}
} as ITableConfig)
</script>2.table 固定查询条件，需要配置 queryMap 属性
代码示例
vue
<ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false" />
<script lang="ts" setup>
const tableConfig = ref({
queryMap: { id: 1 },
fetch: async (postData: any) => {
const result = { records: tableData.filter((item) => postData.id === item.id) }
return await new Promise((resolve) => {
setTimeout(() => resolve(result), 1000)
})
},
column: [
{ prop: 'id', label: 'id' },
{ prop: 'name', label: '名字' },
{ prop: 'sex', label: '性别', format: 'formatSex' },
{ prop: 'age', label: '年龄' },
{ prop: 'address', label: '地址' }
]
} as ITableConfig)
</script><ElPlusTable ref="tableListRef" :tableConfig="tableConfig" :isPager="false" />
<script lang="ts" setup>
const tableConfig = ref({
queryMap: { id: 1 },
fetch: async (postData: any) => {
const result = { records: tableData.filter((item) => postData.id === item.id) }
return await new Promise((resolve) => {
setTimeout(() => resolve(result), 1000)
})
},
column: [
{ prop: 'id', label: 'id' },
{ prop: 'name', label: '名字' },
{ prop: 'sex', label: '性别', format: 'formatSex' },
{ prop: 'age', label: '年龄' },
{ prop: 'address', label: '地址' }
]
} as ITableConfig)
</script>