zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD TableSelect

This commit is contained in:
sakuya 2021-06-11 23:56:24 +08:00
parent 907481c462
commit 231c90ad9b
4 changed files with 106 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/index.js
View File

@ -119,6 +119,13 @@ const api = {
}
},
demo: {
page: {
url: `${config.MOCK_URL}/page`,
name: "分页列表",
get: async function(params){
return await http.get(this.url, params);
}
},
upload: {
url: `${config.MOCK_URL}/upload`,
name: "文件上传接口",

104
src/components/scTableSelect/index.vue
View File

@ -1,5 +1,5 @@
<!--
* @Descripttion: 分页下拉组件
* @Descripttion: 表格选择器组件
* @version: 1.0
* @Author: sakuya
* @Date: 2021年6月10日10:04:07
@ -8,14 +8,15 @@
-->
<template>
<el-select ref="select" v-model="defaultValue" clearable multiple filterable placeholder="请选择" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
<el-select ref="select" v-model="defaultValue" clearable :multiple="multiple" filterable :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
<template #empty>
<div class="sc-table-select__table" style="width: 500px;" v-loading="loading">
<el-table ref="table" :data="tableData" :height="245" stripe @select="select" @select-all="selectAll">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column prop="id" label="ID" width="150"></el-table-column>
<el-table-column prop="user" label="姓名"></el-table-column>
<div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
<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>
</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>
@ -29,7 +30,13 @@
export default {
props: {
modelValue: null,
apiObj: { type: Object, default: () => {} },
placeholder: { type: String, default: "请选择" },
multiple: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
tableWidth: {type: Number, default: 400},
mode: { type: String, default: "popover" },
props: { type: Object, default: () => {} }
},
data() {
return {
@ -40,9 +47,12 @@
pageSize: 20,
total: 0,
currentPage: 1,
props: {
label: 'user',
value: 'id'
defaultProps: {
label: 'label',
value: 'value',
page: 'page',
pageSize: 'pageSize',
keyword: 'keyword'
}
}
},
@ -55,10 +65,11 @@
this.autoCurrentLabel()
},
defaultValue(){
this.$emit('update:modelValue', this.defaultValue);
}
},
mounted() {
this.defaultProps = Object.assign(this.defaultProps, this.props);
this.defaultValue = this.modelValue
this.autoCurrentLabel()
},
@ -68,28 +79,36 @@
if(visible){
this.currentPage = 1
this.getData()
}else{
this.autoCurrentLabel()
}
},
//获取表格数据
async getData(){
this.loading = true;
var reqData = {
page: this.currentPage,
pageSize: this.pageSize,
keyword: this.keyword
[this.defaultProps.page]: this.currentPage,
[this.defaultProps.pageSize]: this.pageSize,
[this.defaultProps.keyword]: this.keyword
}
var res = await this.$API.log.list.get(reqData);
this.tableData = res.data;
this.total = res.count;
var res = await this.apiObj.get(reqData);
this.tableData = res.data.rows;
this.total = res.data.total;
this.loading = false;
//表格默认赋值
this.$nextTick(() => {
this.defaultValue.forEach(row => {
var setrow = this.tableData.filter(item => item[this.props.value]===row[this.props.value] )
if(setrow.length > 0){
this.$refs.table.toggleRowSelection(setrow[0], true);
}
})
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]);
}
})
},
//分页刷新表格
@ -99,9 +118,13 @@
//自动模拟options赋值
autoCurrentLabel(){
this.$nextTick(() => {
this.$refs.select.selected.forEach(item => {
item.currentLabel = item.value[this.props.label]
})
if(this.multiple){
this.$refs.select.selected.forEach(item => {
item.currentLabel = item.value[this.defaultProps.label]
})
}else{
this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label]
}
})
},
//表格勾选事件
@ -110,42 +133,55 @@
if(isSelect){
this.defaultValue.push(row)
}else{
this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.props.value] == row[this.props.value]), 1)
this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
}
this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
},
//表格全选事件
selectAll(rows){
var isAllSelect = rows.length > 0
if(isAllSelect){
rows.forEach(row => {
var isHas = this.defaultValue.find(item => item[this.props.value] == row[this.props.value])
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.props.value] == row[this.props.value])
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.props.value] == row[this.props.value]), 1)
this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
}
})
}
this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
},
click(row){
if(this.multiple){
//处理多选点击行
}else{
this.defaultValue = row
this.$refs.select.blur()
this.autoCurrentLabel()
this.$emit('update:modelValue', this.defaultValue);
}
},
//tags删除后回调
removeTag(tag){
var row = this.findRowByKey(tag[this.props.value])
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);
this.$emit('update:modelValue', this.defaultValue);
},
// 关键值查询表格数据行
findRowByKey (value) {
return this.tableData.find(item => item[this.props.value] === value)
return this.tableData.find(item => item[this.defaultProps.value] === value)
},
filterMethod(keyword){
if(!keyword){

2
src/main.js
View File

@ -16,6 +16,7 @@ import scFilterBar from './components/scFilterBar'
import scUpload from './components/scUpload'
import scUploadMultiple from './components/scUpload/multiple'
import scFormTable from './components/scFormTable'
import scTableSelect from './components/scTableSelect'
const app = createApp(App);
@ -34,5 +35,6 @@ app.component('scFilterBar', scFilterBar);
app.component('scUpload', scUpload);
app.component('scUploadMultiple', scUploadMultiple);
app.component('scFormTable', scFormTable);
app.component('scTableSelect', scTableSelect);
app.mount('#app');

42
src/views/vab/tableselect.vue
View File

@ -9,36 +9,48 @@
<template>
<el-main>
<el-card shadow="never">
<sc-table-select v-model="value" style="width: 400px;">
<el-alert title="select深度改造的表格选择器, 非常适用于大量数据选择的场景" type="success" style="margin-bottom:20px;"></el-alert>
<el-card shadow="never" header="单选">
<sc-table-select v-model="value2" :apiObj="apiObj" :table-width="600" :props="props">
<el-table-column prop="id" label="ID" width="150"></el-table-column>
<el-table-column prop="user" label="姓名"></el-table-column>
</sc-table-select>
</el-card>
<div style="height:15px"></div>
<el-card shadow="never" header="多选">
<sc-table-select v-model="value" :apiObj="apiObj" multiple :props="props">
<el-table-column prop="id" label="ID" width="150"></el-table-column>
<el-table-column prop="user" label="姓名"></el-table-column>
</sc-table-select>
<p>{{value}}</p>
</el-card>
</el-main>
</template>
<script>
import scTableSelect from '@/components/scTableSelect';
export default {
name: 'tableselect',
components: {
scTableSelect
},
data() {
return {
apiObj: this.$API.demo.page,
value: [
{
id: "10",
user: "王小虎"
id: "410000199512025445",
user: "魏磊"
},
{
id: "2",
user: "曹操"
id: "520000198407304275",
user: "史平"
}
]
],
value2: {
id: "520000198407304275",
user: "史平"
},
props: {
label: 'user',
value: 'id',
keyword: "keyword"
}
}
},
computed: {