本文展示了如何使用Vue.js实现一个动态表格组件，包括表头自定义排序、数据筛选、添加、编辑和删除功能。通过实例，详细解释了组件的结构、数据绑定、事件监听以及页面分页等关键操作。
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js表格组件实战</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app">
<my-search @search-val="searchValFun"></my-search>
<table id="customers">
<thead>
<tr>
<template v-for="column in columns">
<th>
<!--显示表头-->
{
{column.title}}
<!--透过sortable中的值时候显示-->
<a href="#" v-if="column.sortable" @click="sortList(column.name,false)">↑</a>
<a href="#" v-if="column.sortable" @click="sortList(column.name,true)">↓</a>
</th>
</template>
</tr>
</thead>
<tbody>
<template v-for="(row,index) in data " v-if="row.chgstation_name.indexOf(search)>=0||row.supheat_name.indexOf(search)>=0">
<tr>
<td>{
{row.id}}</td>
<td>{
{row.chgstation_name}}</td>
<td>{
{row.supheat_name}}</td>
<td>{
{row.heatarea}}</td>
<td>{
{row.circul_pumps_number}}</td>
<td>{
{row.makeup_pumps_number}}</td>
<td><input type="checkbox" :checked="row.state===0?false:true" disabled></td>
<td>
<button @click="dataInfo(row)">查看</button>
<button @click="editInfo(row,index)">编辑</button>
<button @click="Delete(row.id,index)">删除</button>
</td>
</tr>
</template>
<tr>
<td><input type="number" v-model="rowtemplate.id" /></td>
<td><input type="text" v-model="rowtemplate.chgstation_name" /></td>
<td>
<div>
<select v-model="rowtemplate.supheat_id" @change="selectCompany">
<option v-for="company in companyInfos" :value="company.id">{
{company.companyName}}</option>
</select>
</div>
</td>
<td><input type="number" v-model="rowtemplate.heatarea" /></td>
<td><input type="number" v-model="rowtemplate.circul_pumps_number" /></td>
<td><input type="number" v-model="rowtemplate.makeup_pumps_number" /></td>
<td><input type="checkbox" v-model="comState" @click="checkboxClick"></td>
<td><button type="button" @click="Save">保存</button></td>
</tr>
</tbody>
</table>
<div class="page-bar">
<ul>
<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
<li v-if="cur==1"><a class="banclick">上一页</a></li>
<li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
<a v-on:click="btnClick(index)">{
{ index }}</a>
</li>
<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
<li v-if="cur == all"><a class="banclick">下一页</a></li>
<li><a>共<i>{
{all}}</i>页</a></li>
</ul>
</div>
</div>
</body>
<script src="js/tableData.js"></script>
<script>
//自定义组件
Vue.component('my-search', {
template: '<div class="search"><span>搜索</span><input v-model="search" /></div>'
最低0.47元/天 解锁文章
9094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
