vue基础表格+计算属性实现搜索功能+「代码实例」

最新推荐文章于 2024-06-22 13:17:38 发布

一杯雪花勇闯天涯

最新推荐文章于 2024-06-22 13:17:38 发布

阅读量501

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109277652

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一.基础表格代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础表格示例</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			.box {
				height: auto;
				width: 90%;
				margin: 1% 20%;
			}
			.div {
				width: 60%;
				border:1px dotted #000;
				margin-top: 1rem;
			}
			.box table {
				margin-top: 1rem;
				border-collapse: collapse;
				width: 60%;
				text-align: center;
			}
			.box table thead th{
				background: #008cff;
				color: white;
				height: 1rem;
			}
			h1 {
				text-align: center;
			}
			.active {
				width:10%;
				height: 1.5rem;
			    background-color: #008CFF;
				color: white;
			}
		
		</style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<div class="div" style="border: none;">
					<h1>vue基础表格操作实例</h1>
				</div>
			
				<div class="div">
					<label>品牌名称:</label>
					<input type="text" v-model="inputText"  v-focus/>
					<button type="button" :disabled="this.inputText.length === 0"  :class="{active:this.inputText.length != 0}"  @click="addItem()">添加</button>
				</div>
				<div class="div">
					<label>搜索:</label>
					<input type="text" v-model="searchText" placeholder="输入品牌名称进程搜索"/>
				</div>
				<table border="1">
					<thead>
						<th>编号</th>
						<th>品牌名称</th>
						<th>创立时间</th>
						<th>操作</th>
					</thead>
					<tbody>
						
						<tr v-for="(v,k) in newlist">
							<td>{{v.id}}</td>
							<td>{{v.name}}</td>
							<td>{{v.create_time|fmtDate}}</td>
							<td><a href="#" @click="delItem(k)">删除</a></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript">
	var num = 1;
	var object = new Vue({
		el:"#app",
		data:{
			list:[
				{id:num,name:"TCL",create_time:new Date()},
				{id:num+=1,name:"小米",create_time:new Date()},
				{id:num+=1,name:"苹果",create_time:new Date()},
			],
			inputText:"",
			searchText:"",
		},
		methods:{
			delItem:function(k) {
				if (confirm("您确定是否删除当前行吗?")) {
					return this.list.splice(k,1);
				}
					
			},
			addItem:function() {
				return this.list.unshift({
					"id":num+=1,
					"name":this.inputText,
					 "create_time": new Date(),
				});
			}
		},
		filters:{
			fmtDate:function(item) {
				return moment().format("YYYY-MM-DD HH:mm:ss");;
			}
		},
		computed:{
			newlist(){
				return this.list.filter((item) =>{
					  return item.name.startsWith(this.searchText);
				});
			}
		},
		directives:{
			focus: {
				inserted(el){
					el.focus();
				}
			}
		}
	});
</script>

二.实现效果

在这里插入图片描述

一杯雪花勇闯天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础表格+计算属性实现搜索功能+「代码实例」

一.基础表格代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基础表格示例</title> <style> *{ padding: 0px; margin: 0px; } .box { height: auto; width: 90%; margin: 1% 20%; }
复制链接

扫一扫

专栏目录