vue+element实现自定义选择展示table列

组件TableSeting.vue

<template>
	<div>
		<div class="setting_icon">
			<i class="el-icon-s-tools" @click="openDialog"></i>
		</div>
		<el-dialog title="自定义列" class="table_setting" :visible.sync="dialogVisible" modal-append-to-body width="30%" append-to-body>
			<div class="check_list">
				<el-scrollbar style="height: 100%">
					<!-- 滚动条要包裹的内容 -->
					<div>
						<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
						<div style="margin: 15px 0"></div>
						<el-checkbox-group v-model="checkList" @change="handleCheckedChange">
							<div v-for="(item, index) in dataList" :key="index" class="check_div">
								<el-row>
									<el-col :span="16">
										<el-checkbox :label="item.fieldName" :disabled="item.checked">
											{{ item.fieldNameVal }}
										</el-checkbox>
									</el-col>
									<el-col :span="8" align="right">
										<span class="check_span">
											<span @click="clickDown(index)" class="oper_click">下移</span>
											&nbsp;
											<span @click="clickUp(index)" class="oper_click">上移</span>
										</span>
									</el-col>
								</el-row>
							</div>
						</el-checkbox-group>
					</div>
				</el-scrollbar>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="enterClick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "TableSet",
	props: {
		fieldsData: {//全部数据
			type: Array,
			default: () => [],
		},
		checkFieldsData: {//已经选择的数据
			type: Array,
			default: () => [],
		},
	},
	data: function () {
		return {
			dialogVisible: false,
			dataList: [...this.fieldsData],
			checkList: [], //选中的数据
			isIndeterminate: false, //是否半选
			checkAll: false,
		};
	},
	methods: {
		handleCheckedChange() {
			let tolCount = this.dataList.length;
			let checkCount = this.checkList.length;
			this.checkAll = tolCount === checkCount ? true : false;
			this.isIndeterminate = checkCount > 0 && checkCount < tolCount ? true : false;
		},
		handleCheckAllChange() {
			this.isIndeterminate = false;
			let arr = [];
			this.dataList.forEach(item=>{
				if(item.checked == true) {
					arr.push(item.fieldName)
				}
			})
			this.checkList = this.checkAll ? (this.checkList = this.dataList.map((c) => {return c.fieldName; })) : (this.checkList = arr);
		},
		openDialog() {
			this.dialogVisible = true;
		},
		enterClick() {
			this.dialogVisible = false;
			let param = {
				checkList: this.sortReference(this.orderFieldsAll(this.dataList),this.checkList),
				dataList: this.dataList,
				orderList: this.orderFieldsAll(this.dataList),
			};
			this.$emit("selectFields", param);
		},
		fieldsDataAllCheck() {
			let arr = [];
			this.fieldsData.forEach((item) => {
				arr.push(item.fieldName);
			});
			return arr;
		},
		swapItems(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0];
			return arr;
		},
		orderFieldsAll(arr) {
			let newArr = [];
			arr.forEach((item) => {
				newArr.push(item.fieldName);
			});
			return newArr;
		},
		clickDown(index) {
			if (this.dataList.length > 1 && index !== this.dataList.length - 1) {
				this.swapItems(this.dataList, index, index + 1);
			}
		},
		clickUp(index) {
			if (this.dataList.length > 1 && index !== 0) {
				this.swapItems(this.dataList, index, index - 1);
			}
		},
		/**
		 * 根据reference_array的顺序返回array
		 * @param {*} reference_array 
		 * @param {*} array 
		 */
		sortReference(reference_array, array) {
			array.sort(function (a, b) {
				return reference_array.indexOf(a) - reference_array.indexOf(b);
			});
			return array
		},
	},
	mounted: function () {
		if (this.checkFieldsData.length < 1) {
			this.checkList = this.fieldsDataAllCheck(); //选中的数据
			this.checkAll = true; //是否全选
		} else {
			this.checkList = this.checkFieldsData;
			this.checkFieldsData.length == this.fieldsData.length ? (this.checkAll = true) : (this.checkAll = false); //是否全选;
		}
	},
	created: function () {},
};
</script>

<style scoped>
.setting_icon {
	cursor: pointer;
}
.check_list {
	height: 500px;
}
.check_div {
	border: 1px solid #ccc;
	border-bottom: none;
	padding: 6px;
}
.check_span {
	display: none;
	font-size: 14px;
	cursor: pointer;
	font-weight: 800;
	padding-right: 10px;
}
.check_div:hover .check_span {
	display: block;
}
.check_div:last-child {
	border-bottom: 1px solid #ccc;
}
.oper_click {
	color: #ccc;
	font-size: 14px;
}
</style>
<style>
.table_setting .el-dialog__body {
	padding: 10px !important;
}
</style>

组件的使用

引用
import TableSeting from "@/components/TableSetting/TableSeting.vue";

components: { TableSeting },
使用
<TableSeting :fieldsData="showFieldsDataAll" :checkFieldsData="checkFieldsData" :orderFieldsData="orderFieldsData" @selectFields="selectFields"></TableSeting>
用到的参数
// 全部字段
showFieldsDataAll: [
	{
		//普通无需翻译
		fieldName: "txnNo",//字段名
		fieldNameVal: "流水号",//label名
		isTranslate: false,//是否具有翻译
		checked: true,//是否必选
		fieldWidth: "250",//列宽
		fieldAlign: "left",//列对齐方式
	},
	{
		//翻译一个字段
		fieldName: "txnType",
		fieldNameVal: "类型",
		isTranslate: true,//是否具有翻译
		checked: true,
		fieldWidth: "100",
		fieldAlign: "left",
		transType: "single",//翻译的字段为单个
		translateMethod: (cellValue) => {//翻译方法
			return this.txnType[cellValue] ? this.txnType[cellValue] : cellValue;
		},
	},
	{
		//翻译两个字段
		fieldName: "txnDate",
		fieldName2: "txnTime",
		checked: true,
		fieldNameVal: "平台日期",
		isTranslate: true,
		fieldWidth: "150",
		fieldAlign: "left",
		transType: "double",//翻译字段为两个
		translateMethod: (cellValue1, cellValue2) => {//翻译方法
			return String(cellValue1).toDateString() + " " + String(cellValue2).toTimeString();
		},
	},
],
// 需要展示的字段
showFieldsData: [],
// 已经勾选了需要展示的
checkFieldsData: [],
// 字段的排序
orderFieldsData: [],
在钩子created中判断的参数（由于排列顺序和已选展示是保存在localstorage中的）
// 已经设置好的排序
let orderList = localStorage.getItem("corpOrderList");
if(orderList) {//如果排序的存在则按照排序的来进行数据排序展示
	let arr = orderList.split(",")
	this.showFieldsDataAll=this.fieldOrder(arr);
}
// 已经选择的
let checkList = localStorage.getItem("corpCheckList");
if(checkList) {//按照有选择的排序，没有就为默认的
	this.showFieldsData = this.fieldFhunt(checkList.split(","));//要展示的字段对象
	this.checkFieldsData = checkList.split(",");//已经选择展示的
} else {
	this.showFieldsData = this.showFieldsDataAll
}
method中的方法(其中包括确定按钮的回掉函数）
// 关于排序字段用到的东西------------start----------------/
selectFields(val) {
	console.log("回调已选择", val);
	this.checkFieldsData = val.checkList;
	localStorage.setItem("corpCheckList", val.checkList.join(",")); //已勾选
	localStorage.setItem("corpOrderList", val.orderList.join(",")); //排序
	this.showFieldsDataAll = val.dataList;//新的排序数据
	this.showFieldsData = this.fieldFhunt(val.checkList);
},
fieldFhunt(arr) {
	let newArr = [];
	this.showFieldsDataAll.forEach((item) => {
		if (arr.indexOf(item.fieldName) != -1) {
			newArr.push(item);
		}
	});
	return newArr;
},
fieldOrder(arr) {
	let newArr = [];
	arr.forEach(item => {
		this.showFieldsDataAll.forEach(v => {
			if(v.fieldName == item) {
				newArr.push(v)
			}
		})
	})
	return newArr;
},
// 关于排序字段用到的东西------------end----------------/
循环展示的el-table-column
<el-table-column
	v-for="(item, index) in showFieldsData"
	:key="index"
	:align="item.fieldAlign"
	:label="item.fieldNameVal"
	:min-width="item.fieldWidth"
	:prop="item.fieldName"
	show-overflow-tooltip
>
	<template slot-scope="scope">
		<!--需要翻译 -->
		<div v-if="item.isTranslate">
			<!-- 翻译的是单个字段 -->
			<div v-if="item.transType == 'single'">
				<span v-if="scope.row[item.fieldName]">{{ item.translateMethod(scope.row[item.fieldName]) }}</span>
			</div>
			<!-- 翻译的是两个字段（如果需要多个，可以自己写） -->
			<div v-else-if="item.transType == 'double'">
				<span v-if="scope.row[item.fieldName] && scope.row[item.fieldName2]">{{ item.translateMethod(scope.row[item.fieldName], scope.row[item.fieldName2]) }}</span>
			</div>
		</div>
		<!-- 不需要翻译 -->
		<div v-else>
			<span v-if="scope.row[item.fieldName]">{{ scope.row[item.fieldName] }}</span>
		</div>
	</template>
</el-table-column>
# vue.js # javascript # 前端 # elementui
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue