table
<script>
import { ref, toRef, watchEffect, onMounted, toRefs } from 'vue';
export default({
name:"GZTable",
props:{
tableData:Array,
columns:Array,
isSelection:Boolean,
isvisible:Boolean,
},
emits: ["sizeChange","currentChange"],//父组件传递过来的方法
setup(props,context) {
const { tableData, columns, isSelection, isvisible} = toRefs(props);
const handleSizeChange = (val)=>{
console.log(`每页 ${val} 条`)
//触发父组件的方法
context.emit('sizeChange',val)
}
const handleCurrentChange = (val)=>{
console.log(`当前页: ${val}`)
context.emit('currentChange',val)
}
const currentPage = ref(4);
return{
handleSizeChange,
handleCurrentChange,
currentPage,
...{ tableData, columns, isSelection, isvisible}
}
},
})
</script>
<template>
<el-table :data="tableData" style="width: 100%">
<template v-for="item in columns">
<el-table-column v-if="isSelection" type="selection" width="55" />
<el-table-column
v-if="item.isshow !== false"
:key="item.indexId"
:align="item.align"
:prop="item.prop"
:label="item.label"
:formatter="item.formatter"
:column-key="item.prop"
:filters="item.filters"
:filter-method="item.filtersMethod"
:sortable="item.sortable"
:header-align="item.headerAlign"
:filter-multiple="item.filterMultiple"
></el-table-column>
</template>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
>
</el-pagination>
</template>
<style scoped>
</style>
穿梭框
<script>
import { ref, toRefs } from 'vue'
import { ElMessageBox, ElMessage } from "element-plus";
import { ArrowUp, ArrowDown, Top } from '@element-plus/icons'//图标
export default({
name:"GZTableTransfer",
props:{
dialogVisible:{
type: Boolean,
require: true
},
columnData:{
type: Array,
require: true
},
value:{
type: Array,
require: true
}
},
emits: ["handleClose","setCheckedColumns"],//父组件传递过来的方法
components:{
ArrowUp,
ArrowDown,
Top
},
setup(props, { emit }) {
let tempSelectionKeys = ref([]);
let arr = [];
props.columnData.map((item)=>{
arr.push(item.prop);
})
let value = ref(arr);
const handleClose = () => {
emit('handleClose',false)
}
let upDownDisable = ref(true)
const updata = ()=>{
//判断选择的是不是一个 只支持单个元素改变排序
if(tempSelectionKeys.length>1){
ElMessage.error({
message: "只支持单选调顺序",
});
}
let indexNum = 0;
for(let i = 0;i<tempSelectionKeys.length;i++){
indexNum = (value.value).indexOf(tempSelectionKeys[i]);
console.log(indexNum);
if(indexNum>0){
(value.value).splice(indexNum-1,0,tempSelectionKeys[i]);
(value.value).splice(indexNum+1,1);
}
}
}
const downdata = ()=>{
//判断选择的是不是一个 只支持单个元素改变排序
if(tempSelectionKeys.length>1){
ElMessage.error({
message: "只支持单选调顺序",
});
}
let indexNum = 0;
for(let i = 0;i<tempSelectionKeys.length;i++){
indexNum = (value.value).indexOf(tempSelectionKeys[i]);
console.log(indexNum);
if(indexNum>-1 && indexNum != (value.value).length-1){
(value.value).splice(indexNum+2,0,tempSelectionKeys[i]);
(value.value).splice(indexNum,1);
}
}
}
const topdata = ()=>{
//判断选择的是不是一个 只支持单个元素改变排序
if(tempSelectionKeys.length>1){
ElMessage.error({
message: "只支持单选调顺序",
});
}
let indexNum = 0;
indexNum = (value.value).indexOf(tempSelectionKeys[0]);
(value.value).splice(indexNum,1);
(value.value).unshift(tempSelectionKeys[0]);
}
const rightCheck = (selectionsKeys,changeKeys)=>{
tempSelectionKeys = selectionsKeys;
if(selectionsKeys.length > 0){
upDownDisable.value = false;
}else{
upDownDisable.value = true;
}
}
const setCheckedColumns = ()=>{
//将选择到右侧的columns值 传给父组件 刷新表格
emit('setCheckedColumns',value)
}
// setCheckedColumns()
return {
tempSelectionKeys,
value: value,
handleClose,
setCheckedColumns,
upDownDisable,
updata,
downdata,
topdata,
rightCheck,
}
},
})
</script>
<template>
<!-- <el-button type="text" @click="dialogVisible = true">设置列</el-button> -->
<el-dialog
v-model="dialogVisible"
title="设置列"
width="760px"
:before-close="handleClose"
>
<el-row>
<el-col :span="20">
<!--target order 属性是必须的 否则排序会不好使-->
<el-transfer
v-model="value"
:props="{
key: 'prop',
label: 'label',
}"
target-order="push"
:data="columnData"
@right-check-change="rightCheck"
>
</el-transfer>
</el-col>
<el-col :span="4" style="display:flex;flex-direction:column;justify-content: space-around;">
<div>
<el-button :disabled="upDownDisable" @click="updata" circle>
<el-icon style="vertical-align: middle;">
<ArrowUp />
</el-icon>
</el-button>
</div>
<div>
<el-button :disabled="upDownDisable" @click="downdata" circle>
<el-icon style="vertical-align: middle;">
<ArrowDown />
</el-icon>
</el-button>
</div>
<div>
<el-button :disabled="upDownDisable" @click="topdata" circle>
<el-icon style="vertical-align: middle;">
<Top />
</el-icon>
</el-button>
</div>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="setCheckedColumns">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<style>
</style>
vue3使用例子
<script>
import { ref, reactive, onMounted, markRaw, toRaw, unref } from "vue";
import GZTable from "@/components/Table.vue";
import GZTableTransfer from "@/components/TableTransfer.vue";
import Test from "@/components/test.vue";
export default {
name: "test1",
components: {
GZTable,
GZTableTransfer,
Test,
},
setup() {
// const showTable = ref(false);
const dialogVisible = ref(false);
const tableData = ref([]);
const handleSizeChange = (val) => {
alert(val);
};
const handleCurrentChange = (val) => {
alert(val);
};
const initData = () => {
alert("init");
};
const handleClose = (str) => {
dialogVisible.value = str;
};
const setCheckedColumns = (value) => {
console.log(value);
// showTable.value = false;
console.log(columns);
//改变table的columns列，刷新table
let newColumns = unref(value.value);
// let curcolumns = toRaw(columnsSource).arr;
let curcolumns = JSON.parse(JSON.stringify(columnsSource.arr));
for (let i = 0, len = curcolumns.length; i < len; i++) {
let temp = curcolumns[i];
if (typeof temp == "object") {
console.log(temp);
let prop = temp.prop;
console.log(prop);
let index = newColumns.findIndex((value, index, arr) => {
return value == prop;
});
if (index > -1) {
curcolumns[i]={
...curcolumns[i],
indexId:index,
isshow:true
}
} else {
curcolumns[i]={
...curcolumns[i],
indexId:'-1',
isshow:false
}
}
}
}
curcolumns.map((item)=>{
if(item.isshow == 'true'){
return item
}
})
curcolumns.sort((a, b) => {
return a.indexId - b.indexId;
});
console.log(curcolumns);
columns.arr = curcolumns;
// showTable.value = true;
dialogVisible.value = false;
};
const getDataList = () => {
// showTable.value = false;
tableData.value = [
{
date: "22222222-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "333333333332016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
];
let arr = [
{
prop: "date",
label: "日期",
width: "180",
indexId: 0,
isshow: true,
},
{
prop: "name",
label: "姓名111",
width: "180",
indexId: 1,
isshow: true,
},
{
prop: "address",
label: "地址",
width: "380",
indexId: 2,
isshow: true,
},
];
let columns = reactive({arr:arr});
let columnsSource = reactive({arr:[
{
prop: "date",
label: "日期",
width: "180",
indexId: 0,
isshow: true,
},
{
prop: "name",
label: "姓名111",
width: "180",
indexId: 1,
isshow: true,
},
{
prop: "address",
label: "地址",
width: "380",
indexId: 2,
isshow: true,
},
]});
// showTable.value = true;
return {
columnsSource,
columns,
}
};
let {
columnsSource,
columns,
} = getDataList();
const data = reactive({
arr: [
{ id: 1, name: "11", value: "111" },
{ id: 2, name: "22", value: "222" },
{ id: 3, name: "33", value: "333" },
{ id: 4, name: "44", value: "444" },
],
});
const updateData = () => {
// data.arr.map((item)=>{
// item.value = 'iiiii'
// })
data.arr = [
{ id: 1, name: "11", value: "111" },
{ id: 2, name: "22", value: "222" },
];
};
return {
handleClose,
getDataList,
setCheckedColumns,
// showTable,
dialogVisible,
tableData,
columnsSource,
columns,
handleSizeChange,
handleCurrentChange,
initData,
updateData,
data,
};
},
};
</script>
<template>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>
<el-button type="text" @click="dialogVisible = true">设置列</el-button>
<GZTableTransfer
:dialogVisible="dialogVisible"
:columnData="columnsSource.arr"
@handleClose="handleClose($event)"
@setCheckedColumns="setCheckedColumns($event)"
></GZTableTransfer>
<GZTable
:isSelection="false"
:tableData="tableData"
:columns="columns.arr"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
></GZTable>
</el-main>
</el-container>
</template>
<style scoped>
</style>
