no message
This commit is contained in:
parent
ffd3b2325d
commit
4ccef9dc20
@ -10,9 +10,6 @@
|
||||
</div>
|
||||
<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="55"></el-table-column>
|
||||
<el-table-column v-else type="index" width="55">
|
||||
<template #default="scope"><span>{{scope.$index+(currentPage - 1) * limit + 1}}</span></template>
|
||||
</el-table-column>
|
||||
<slot></slot>
|
||||
</el-table>
|
||||
<div class="x-table-select__page">
|
||||
@ -24,226 +21,259 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/tableSelect";
|
||||
import config from "@/config/tableSelect";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: null,
|
||||
api: { type: String, default: '' },
|
||||
params: { type: Object, default: () => {} },
|
||||
form: { type: Array, default: () => [] },
|
||||
placeholder: { type: String, default: "请选择" },
|
||||
size: { type: String, default: "default" },
|
||||
clearable: { type: Boolean, default: false },
|
||||
multiple: { type: Boolean, default: false },
|
||||
filterable: { type: Boolean, default: false },
|
||||
collapseTags: { type: Boolean, default: false },
|
||||
collapseTagsTooltip: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false },
|
||||
mode: { type: String, default: "popover" },
|
||||
props: { type: Object, default: () => {} }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
keyword: null,
|
||||
defaultValue: [],
|
||||
tableData: [],
|
||||
limit: config.limit,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
defaultProps: {
|
||||
label: config.props.label,
|
||||
value: config.props.value,
|
||||
page: config.request.page,
|
||||
limit: config.request.limit,
|
||||
keyword: config.request.keyword
|
||||
},
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
export default {
|
||||
props: {
|
||||
modelValue: null,
|
||||
api: { type: String, default: '' },
|
||||
params: { type: Object, default: () => { } },
|
||||
form: { type: Array, default: () => [] },
|
||||
placeholder: { type: String, default: "请选择" },
|
||||
size: { type: String, default: "default" },
|
||||
clearable: { type: Boolean, default: false },
|
||||
multiple: { type: Boolean, default: false },
|
||||
filterable: { type: Boolean, default: false },
|
||||
collapseTags: { type: Boolean, default: false },
|
||||
collapseTagsTooltip: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false },
|
||||
mode: { type: String, default: "popover" },
|
||||
props: { type: Object, default: () => { } }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
keyword: null,
|
||||
defaultValue: [],
|
||||
tableData: [],
|
||||
limit: config.limit,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
defaultProps: {
|
||||
label: config.props.label,
|
||||
value: config.props.value,
|
||||
page: config.request.page,
|
||||
limit: config.request.limit,
|
||||
keyword: config.request.keyword,
|
||||
field: {}
|
||||
},
|
||||
formData: {},
|
||||
skey: '',
|
||||
dkey: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
modelValue:{
|
||||
handler(){
|
||||
this.defaultValue = this.modelValue
|
||||
this.autoCurrentLabel()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.defaultProps = Object.assign(this.defaultProps, this.props);
|
||||
this.defaultValue = this.modelValue
|
||||
this.autoCurrentLabel()
|
||||
},
|
||||
methods: {
|
||||
//表格显示隐藏回调
|
||||
visibleChange(visible){
|
||||
if(visible){
|
||||
this.currentPage = 1
|
||||
this.keyword = null
|
||||
this.formData = {}
|
||||
this.getData()
|
||||
}else{
|
||||
this.autoCurrentLabel()
|
||||
}
|
||||
},
|
||||
//获取表格数据
|
||||
async getData(){
|
||||
this.loading = true;
|
||||
var reqData = {
|
||||
[this.defaultProps.page]: this.currentPage,
|
||||
[this.defaultProps.limit]: this.limit,
|
||||
[this.defaultProps.keyword]: this.keyword
|
||||
}
|
||||
Object.assign(reqData, this.params, this.formData)
|
||||
var res = await this.$http.get(this.api, reqData, {cacheparameters:1});
|
||||
var parseData = config.parseData(res)
|
||||
this.tableData = parseData.rows;
|
||||
this.total = parseData.total;
|
||||
this.loading = false;
|
||||
//表格默认赋值
|
||||
this.$nextTick(() => {
|
||||
|
||||
if(typeof this.defaultValue === 'undefined'){
|
||||
this.defaultValue = this.multiple ? [] : {};
|
||||
}
|
||||
|
||||
if(this.multiple){
|
||||
this.defaultValue.forEach(row => {
|
||||
var setrow = this.tableData.filter(item => item[this.defaultProps.value]===row[this.defaultProps.value] )
|
||||
if(setrow.length > 0){
|
||||
this.$refs.table.toggleRowSelection(setrow[0], true);
|
||||
}
|
||||
})
|
||||
}else{
|
||||
var setrow = this.tableData.filter(item => item[this.defaultProps.value]===this.defaultValue[this.defaultProps.value] )
|
||||
this.$refs.table.setCurrentRow(setrow[0]);
|
||||
}
|
||||
this.$refs.table.setScrollTop(0)
|
||||
})
|
||||
},
|
||||
//插糟表单提交
|
||||
formSubmit(){
|
||||
this.currentPage = 1
|
||||
this.keyword = null
|
||||
this.getData()
|
||||
},
|
||||
//分页刷新表格
|
||||
reload(){
|
||||
this.getData()
|
||||
},
|
||||
//自动模拟options赋值
|
||||
autoCurrentLabel(){
|
||||
this.$nextTick(() => {
|
||||
if(this.multiple){
|
||||
this.$refs.select.selected.forEach(item => {
|
||||
item.currentLabel = item.value[this.defaultProps.label]
|
||||
})
|
||||
return ;
|
||||
}
|
||||
this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue
|
||||
})
|
||||
},
|
||||
//表格勾选事件
|
||||
select(rows, row){
|
||||
var isSelect = rows.length && rows.indexOf(row) !== -1
|
||||
if(isSelect){
|
||||
var data = {};
|
||||
for (const key in this.defaultProps) {
|
||||
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) {
|
||||
data[this.defaultProps[key]] = row[this.defaultProps[key]]
|
||||
}
|
||||
}
|
||||
this.defaultValue.push(data)
|
||||
}else{
|
||||
this.defaultValue.splice(
|
||||
this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]),
|
||||
1
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
handler() {
|
||||
this.defaultValue = this.modelValue
|
||||
this.autoCurrentLabel()
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
this.$emit('change', this.defaultValue);
|
||||
},
|
||||
//表格全选事件
|
||||
selectAll(rows){
|
||||
var isAllSelect = rows.length > 0
|
||||
if(isAllSelect){
|
||||
rows.forEach(row => {
|
||||
var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
|
||||
if(!isHas){
|
||||
this.defaultValue.push(row)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.tableData.forEach(row => {
|
||||
var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
|
||||
if(isHas){
|
||||
this.defaultValue.splice(
|
||||
this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]),
|
||||
1
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.autoCurrentLabel()
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
this.$emit('change', this.defaultValue);
|
||||
},
|
||||
click(row){
|
||||
if(this.multiple){
|
||||
//处理多选点击行
|
||||
}else{
|
||||
for (const key in this.defaultProps) {
|
||||
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps[key])) {
|
||||
this.defaultValue[this.defaultProps[key]] = row[this.defaultProps[key]]
|
||||
}
|
||||
}
|
||||
this.$refs.select.blur()
|
||||
this.autoCurrentLabel()
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
this.$emit('change', this.defaultValue);
|
||||
}
|
||||
},
|
||||
//tags删除后回调
|
||||
removeTag(tag){
|
||||
var row = this.findRowByKey(tag[this.defaultProps.value])
|
||||
this.$refs.table.toggleRowSelection(row, false);
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
},
|
||||
//清空后的回调
|
||||
clear(){
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
},
|
||||
// 关键值查询表格数据行
|
||||
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();
|
||||
},
|
||||
// 触发select显示
|
||||
focus(){
|
||||
this.$refs.select.focus();
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.defaultProps = Object.assign(this.defaultProps, this.props);
|
||||
this.defaultValue = this.modelValue
|
||||
this.skey = this.defaultProps.value;
|
||||
|
||||
if (Object.keys(this.defaultProps.field).length === 0) {
|
||||
this.defaultProps.field = {
|
||||
[this.defaultProps.value]: this.defaultProps.value,
|
||||
[this.defaultProps.label]: this.defaultProps.label,
|
||||
}
|
||||
}
|
||||
|
||||
for (let key in this.defaultProps.field) {
|
||||
if (key == this.skey) {
|
||||
this.dkey = this.defaultProps.field[key];
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.autoCurrentLabel()
|
||||
},
|
||||
methods: {
|
||||
//表格显示隐藏回调
|
||||
visibleChange(visible) {
|
||||
if (visible) {
|
||||
this.currentPage = 1
|
||||
this.keyword = null
|
||||
this.formData = {}
|
||||
this.getData()
|
||||
} else {
|
||||
this.autoCurrentLabel()
|
||||
}
|
||||
},
|
||||
//获取表格数据
|
||||
async getData() {
|
||||
this.loading = true;
|
||||
var reqData = {
|
||||
[this.defaultProps.page]: this.currentPage,
|
||||
[this.defaultProps.limit]: this.limit,
|
||||
[this.defaultProps.keyword]: this.keyword
|
||||
}
|
||||
Object.assign(reqData, this.params, this.formData)
|
||||
var res = await this.$http.get(this.api, reqData, { cacheparameters: 1 });
|
||||
var parseData = config.parseData(res)
|
||||
this.tableData = parseData.rows;
|
||||
this.total = parseData.total;
|
||||
this.loading = false;
|
||||
//表格默认赋值
|
||||
this.$nextTick(() => {
|
||||
|
||||
if (typeof this.defaultValue === 'undefined') {
|
||||
this.defaultValue = this.multiple ? [] : {};
|
||||
}
|
||||
|
||||
if (this.multiple) {
|
||||
this.defaultValue.forEach(row => {
|
||||
var setrow = this.tableData.filter(item => item[this.dkey] === row[this.skey])
|
||||
if (setrow.length > 0) {
|
||||
this.$refs.table.toggleRowSelection(setrow[0], true);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
var setrow = this.tableData.filter(item => item[this.dkey] === this.defaultValue[this.skey])
|
||||
this.$refs.table.setCurrentRow(setrow[0]);
|
||||
}
|
||||
this.$refs.table.setScrollTop(0)
|
||||
})
|
||||
},
|
||||
//插糟表单提交
|
||||
formSubmit() {
|
||||
this.currentPage = 1
|
||||
this.keyword = null
|
||||
this.getData()
|
||||
},
|
||||
//分页刷新表格
|
||||
reload() {
|
||||
this.getData()
|
||||
},
|
||||
//自动模拟options赋值
|
||||
autoCurrentLabel() {
|
||||
this.$nextTick(() => {
|
||||
if (this.multiple) {
|
||||
this.$refs.select.selected.forEach(item => {
|
||||
item.currentLabel = item.value[this.defaultProps.label]
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.$refs.select.selectedLabel = typeof this.defaultValue === 'object' ? this.defaultValue[this.defaultProps.label] : this.defaultValue
|
||||
})
|
||||
},
|
||||
//表格勾选事件
|
||||
select(rows, row) {
|
||||
var isSelect = rows.length && rows.indexOf(row) !== -1
|
||||
if (isSelect) {
|
||||
var data = {};
|
||||
for (let key in this.defaultProps.field) {
|
||||
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps.field[key])) {
|
||||
data[key] = row[this.defaultProps.field[key]]
|
||||
}
|
||||
}
|
||||
this.defaultValue.push(data)
|
||||
} else {
|
||||
this.defaultValue.splice(
|
||||
this.defaultValue.findIndex(item => item[this.dkey] == row[this.skey]),
|
||||
1
|
||||
);
|
||||
}
|
||||
this.autoCurrentLabel()
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
this.$emit('change', this.defaultValue);
|
||||
},
|
||||
//表格全选事件
|
||||
selectAll(rows) {
|
||||
var isAllSelect = rows.length > 0
|
||||
if (isAllSelect) {
|
||||
rows.forEach(row => {
|
||||
var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
|
||||
if (!isHas) {
|
||||
this.defaultValue.push(row)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.tableData.forEach(row => {
|
||||
var isHas = this.defaultValue.find(item => item[this.skey] == row[this.dkey])
|
||||
if (isHas) {
|
||||
this.defaultValue.splice(
|
||||
this.defaultValue.findIndex(item => item[this.skey] == row[this.dkey]),
|
||||
1
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.autoCurrentLabel()
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
this.$emit('change', this.defaultValue);
|
||||
},
|
||||
click(row) {
|
||||
if (this.multiple) {
|
||||
//处理多选点击行
|
||||
} else {
|
||||
|
||||
if (this.defaultProps.field) {
|
||||
if (typeof this.defaultValue === 'object') {
|
||||
for (let key in this.defaultProps.field) {
|
||||
if (Object.prototype.hasOwnProperty.call(row, this.defaultProps.field[key])) {
|
||||
this.defaultValue[key] = row[this.defaultProps.field[key]]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.defaultValue = row[this.dkey];
|
||||
}
|
||||
} else {
|
||||
this.defaultValue = row;
|
||||
}
|
||||
|
||||
this.$refs.select.blur()
|
||||
this.autoCurrentLabel()
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
this.$emit('change', this.defaultValue);
|
||||
}
|
||||
},
|
||||
//tags删除后回调
|
||||
removeTag(tag) {
|
||||
var row = this.findRowByKey(tag[this.defaultProps.value])
|
||||
this.$refs.table.toggleRowSelection(row, false);
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
},
|
||||
//清空后的回调
|
||||
clear() {
|
||||
this.$emit('update:modelValue', this.defaultValue);
|
||||
},
|
||||
// 关键值查询表格数据行
|
||||
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();
|
||||
},
|
||||
// 触发select显示
|
||||
focus() {
|
||||
this.$refs.select.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-table-select__table {padding:12px;}
|
||||
.x-table-select__page {padding-top: 12px;}
|
||||
.x-table-select__table {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.x-table-select__page {
|
||||
padding-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
//表格选择器配置
|
||||
export default {
|
||||
limit: 20, //表格每一页条数
|
||||
parseData: function(res) {
|
||||
parseData: function (res) {
|
||||
return {
|
||||
data: res.data,
|
||||
rows: res.data.data, //分析行数据字段结构
|
||||
@ -16,7 +16,11 @@ export default {
|
||||
keyword: 'keyword' //规定搜索字段
|
||||
},
|
||||
props: {
|
||||
label: 'label', // 映射label显示字段
|
||||
value: 'value', // 映射value值字段
|
||||
key: null,
|
||||
label: 'id', // 映射label显示字段
|
||||
value: 'name', // 映射value值字段
|
||||
field: {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user