36176622 by renchao@pashanhoo.com

style:table组件完成

1 parent baaf0b60
{
"TITLE": "不动产登记系统",
"SERVERAPI": "/bdcdj",
"SERVERAPI": "/bdcdj-th",
"IDCARDURL": "http://127.0.0.1:33088/function=get_idcard&readnew=0"
}
......
......@@ -4,12 +4,12 @@
* @Author: sakuya
* @Date: 2021年6月10日10:04:07
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-06-29 11:14:11
* @LastEditTime: 2023-07-05 10:39:17
-->
<template>
<el-select ref="select" v-model="defaultValue" :size="size" :clearable="clearable" :multiple="multiple" :collapse-tags="collapseTags"
:collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod"
:collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled"
@remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
<template #empty>
<div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
......@@ -19,14 +19,10 @@
<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
<el-table-column v-if="multiple" type="selection" width="45"></el-table-column>
<el-table-column v-else type="index" width="45">
<template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
<template #default="scope"><span>{{scope.$index +1 }}</span></template>
</el-table-column>
<slot></slot>
</el-table>
<div class="sc-table-select__page">
<el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage"
@current-change="reload"></el-pagination>
</div>
</div>
</template>
</el-select>
......@@ -48,29 +44,23 @@
disabled: { type: Boolean, default: false },
tableWidth: { type: Number, default: 400 },
mode: { type: String, default: "popover" },
props: { type: Object, default: () => { } }
props: { type: Object, default: () => { } },
// 表格数据
tableData: { type: Array, default: () => { [] } },
},
data () {
return {
loading: false,
keyword: null,
defaultValue: [],
tableData: [],
pageSize: config.pageSize,
total: 0,
currentPage: 1,
defaultProps: {
label: config.props.label,
value: config.props.value,
page: config.request.page,
pageSize: config.request.pageSize,
keyword: config.request.keyword
value: config.props.value
},
formData: {}
}
},
computed: {
},
watch: {
modelValue: {
......@@ -90,8 +80,6 @@
//表格显示隐藏回调
visibleChange (visible) {
if (visible) {
this.currentPage = 1
this.keyword = null
this.formData = {}
this.getData()
} else {
......@@ -100,36 +88,7 @@
},
//获取表格数据
async getData () {
this.loading = true;
var reqData = {
[this.defaultProps.page]: this.currentPage,
[this.defaultProps.pageSize]: this.pageSize,
[this.defaultProps.keyword]: this.keyword
}
Object.assign(reqData, this.formData)
// var res = await this.apiObj.get(reqData);
let res = {
code: 200,
data: {
total: 2, rows: [
{
user: 11111111111,
id: 111111111111
},
{
user: 2222222222222,
id: 22222222222
}
]
},
message: ""
}
var parseData = config.parseData(res)
this.tableData = parseData.rows;
this.total = parseData.total;
this.loading = false;
//表格默认赋值
this.$nextTick(() => {
if (this.multiple) {
this.defaultValue.forEach(row => {
var setrow = this.tableData.filter(item => item[this.defaultProps.value] === row[this.defaultProps.value])
......@@ -138,20 +97,15 @@
}
})
} else {
if (this.defaultValue) {
var setrow = this.tableData.filter(item => item[this.defaultProps.value] === this.defaultValue[this.defaultProps.value])
this.$refs.table.setCurrentRow(setrow[0]);
// this.$refs.table.setCurrentRow(setrow[0]);
}
this.$refs.table.setScrollTop(0)
})
}
// this.$refs.table.setScrollTop(0)
},
//插糟表单提交
formSubmit () {
this.currentPage = 1
this.keyword = null
this.getData()
},
//分页刷新表格
reload () {
this.getData()
},
//自动模拟options赋值
......@@ -162,8 +116,10 @@
item.currentLabel = item.value[this.defaultProps.label]
})
} else {
if (this.defaultValue) {
this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label]
}
}
})
},
//表格勾选事件
......@@ -207,6 +163,7 @@
this.defaultValue = row
this.$refs.select.blur()
this.autoCurrentLabel()
this.$refs.table.setCurrentRow(row);
this.$emit('update:modelValue', this.defaultValue);
this.$emit('change', this.defaultValue);
}
......@@ -225,14 +182,6 @@
findRowByKey (value) {
return this.tableData.find(item => item[this.defaultProps.value] === value)
},
filterMethod (keyword) {
if (!keyword) {
this.keyword = null;
return false;
}
this.keyword = keyword;
this.getData()
},
// 触发select隐藏
blur () {
this.$refs.select.blur();
......@@ -244,7 +193,6 @@
}
}
</script>
<style scoped>
.sc-table-select__table {
padding: 12px;
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-06-29 11:05:49
* @LastEditTime: 2023-07-05 09:48:23
*/
//表格选择器配置
......@@ -9,17 +9,12 @@ export default {
pageSize: 10, //表格每一页条数
parseData: function (res) {
return {
data: res.data,
rows: res.data.rows, //分析行数据字段结构
total: res.data.total, //分析总数字段结构
msg: res.message, //分析描述字段结构
code: res.code //分析状态字段结构
data: res.data
}
},
request: {
page: 'page', //规定当前分页字段
pageSize: 'pageSize', //规定一页条数字段
keyword: 'keyword' //规定搜索字段
},
props: {
label: 'label', //映射label显示字段
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-04 16:08:03
* @LastEditTime: 2023-07-05 09:55:42
-->
<template>
<div class="clxx">
......@@ -67,7 +67,7 @@
...mapGetters(["dictData"])
},
created () {
this.ableOperation = this.$parent.currentSelectTab.ableOperation
this.ableOperation = this.$parent?.currentSelectTab?.ableOperation || false
this.clmlInitList(1)
},
methods: {
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-05-24 14:42:24
* @LastEditTime: 2023-07-05 09:58:31
*/
import { getForm } from "../flowform";
import { getHomeNoticeList } from "@/api/home.js"
......@@ -38,6 +38,7 @@ export default {
for (let item of this.tabList) {
if (item.value === tabname) {
this.currentSelectTab = item
console.log(item, 'item11111111111');
break;
}
}
......