[vue element-UI]table栏位格式化

白露-

已于 2022-12-28 10:55:12 修改

阅读量386

点赞数

分类专栏： Element JAVA学习笔记文章标签： vue.js ui javascript

于 2022-12-27 16:21:02 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56227168/article/details/128457802

版权

JAVA学习笔记同时被 2 个专栏收录

7 篇文章

订阅专栏

Element

1 篇文章

订阅专栏

01.前端代码

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" href="element-ui/theme-chalk/index.css" />
		<script src="element-ui/index.js"></script>
		<style>
			body {
				padding: 0;
				margin: 0;
				background-color: #f1f1f1;
			}

			.container {
				width: 80%;
				margin: 20px auto;
				background-color: #fff;
				border: 1px solid #eee;
			}	
			.el-header{
				padding: 15px ;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<el-container class='container'>
				<el-header>
					<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1001" :max="1009"></el-input-number>
					<el-input-number v-model="num2" controls-position="right" @change="handleChange" :min="1001" :max="1009"></el-input-number>
					<el-button type="primary" @click="onSubmit" plain>查询</el-button>
				</el-header>
				<el-main>
					<el-table :data="tableData" 
						:default-sort = "{prop: 'id', order: 'ascending'}"
						height="250" border stripe
						style="width: 100%">
						<el-table-column prop="id" label="学号" width="180" sortable>
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="180" sortable>
						</el-table-column>
						<el-table-column prop="sex" :formatter="table_sex_formatter" label="性别" sortable>
						</el-table-column>
						<el-table-column prop="phone" label="电话" sortable>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>
		</div>
	</body>
	<script>
	
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue.js!',
				tableData: [],
				num: 1001,
				num2: 1009
			},
			methods: {
				// 表格格式化,sex这一列
				table_sex_formatter(row, column, cellValue, index) {
					return cellValue ? '男' : '女';
				},
				handleChange() {

				},
				onSubmit(){
					queryData();
				}
			}
		})
		
		queryData = function() {
			var args = {
				form: app.num,
				to: app.num2
			};

			$.ajax({
				type: "get",
				url: "Query2",
				async: true,
				data: args,
				success: function(msg) {
					console.log(msg);
					app.tableData = msg;
				}
			});
		}
	</script>

</html>

02.格式化栏位

formatter用来格式化内容Function(row, column, cellValue, index)
我们为期绑定格式化样式:v-bind:formatter="table_sex_formatter"
然后在table_sex_formatter里判断:当数据为true,则显示男,否则显示女

table_sex_formatter(row, column, cellValue, index) {
	return cellValue ? '男' : '女';
}

03.按钮点击,将前端数据传输到后端

vue的onSubmit,触发queryData方法,我们从vue里获取args对象的值赋值于data,再用ajax进行get传输.
当后端返回数据后,将vue的app.tableData赋值

04.后端代码

目录结构:
在这里插入图片描述

package my;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.serializer.SerializerFeature;

/**
 * Servlet implementation class Query
 */
@WebServlet("/Query2")
public class Query2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Query2() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		
		List<Student>stu=new ArrayList<>();
		
		int form=Integer.valueOf(request.getParameter("form"));
		int to=Integer.valueOf(request.getParameter("to"));
		
		for(Student s:DemoDB.list)
		{
			if(s.getId()>=form && s.getId()<=to)
			{
				stu.add(s);
			}
		}
		
		JSONArray jsay= (JSONArray)JSON.toJSON(stu);
		String str=JSON.toJSONString(jsay, SerializerFeature.PrettyFormat);
		
		response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(str);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

package my;

import java.util.ArrayList;
import java.util.List;

public class DemoDB
{
	public static List<Student> list = new ArrayList<Student>();
	static
	{
		list.add(new Student(1001, "唐三", true, "13810002001"));
		list.add(new Student(1002, "小舞", false, "13810002002"));
		list.add(new Student(1003, "戴沐白", true, "13810002003"));
		list.add(new Student(1004, "奥斯卡", true, "13810002004"));
		list.add(new Student(1005, "宁荣荣", false, "13810002005"));
		list.add(new Student(1006, "朱竹清", false, "13810002006"));
		list.add(new Student(1007, "马红俊", true, "13810002007"));
		list.add(new Student(1008, "玉小刚", true, "13810002008"));
		list.add(new Student(1009, "宁风致", true, "13810002009"));
	}
}

package my;

public class Student
{
	private int id;
	private String name;
	private boolean sex;
	private String phone;
	
	public Student(int id,String name,boolean sex,String phone)
	{
		// TODO Auto-generated constructor stub
		this.id = id;
		this.name = name;
		this.sex = sex;
		this.phone = phone;
	}
	
	public int getId()
	{
		return id;
	}
	public void setId(int id)
	{
		this.id = id;
	}
	public String getName()
	{
		return name;
	}
	public void setName(String name)
	{
		this.name = name;
	}
	public boolean isSex()
	{
		return sex;
	}
	public boolean getSex()
	{
		return sex;
	}
	public void setSex(boolean sex)
	{
		this.sex = sex;
	}
	public String getPhone()
	{
		return phone;
	}
	public void setPhone(String phone)
	{
		this.phone = phone;
	}
	
	
}