Vue3 列表界面数据展示详情
目录
- 一、列表界面展示示例
- 2、进行数据显示
- 2.1、组件在列表显示
- 2.2、接口返回数据在列表显示
- 2.3、接口数据改造
- 2.4、list列表一行显示为多条数据
- 2.5、列表内容前图标样式修改
一、列表界面展示示例
现在要做的就是把打到页面的数据，带样式，也就是说好看点显示。
之前我们在《Vue3（二）集成Ant Design Vue》这篇文章中，有提及组件的使用，对于一个前端不是很好（后端也不咋的），本着拿来主义，我们能现成的是最好、最省事的方式了。
直白点说就是，找Ant Design Vue现成的组件，将列表数据按组件样式显示到界面上。
1、挑选自己喜欢的列表样式
从https://2x.antdv.com/components/list-cn中，找到list列表，找到自己喜欢的风格，
如下图所示：
2、进行数据显示
2.1、组件在列表显示
接下来，我们只需要在home里进行修改即可，找到刚才对应组件的位置，把对应代码拷贝到home中，然后在进行修改即可，
示例代码如下：
<template>
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
<template #footer>
<div>
<b>ant design vue</b>
footer part
</div>
</template>
<template #renderItem="{ item }">
<a-list-item key="item.title">
<template #actions>
<span v-for="{ type, text } in actions" :key="type">
<component v-bind:is="type" style="margin-right: 8px" />
{{ text }}
</span>
</template>
<template #extra>
<img
width="272"
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
/>
</template>
<a-list-item-meta :description="item.description">
<template #title>
<a :href="item.href" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ item.title }}</a>
</template>
<template #avatar><a-avatar :src="item.avatar" /></template>
</a-list-item-meta>
{{ item.content }}
</a-list-item>
</template>
</a-list>
</a-layout>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';
import axios from 'axios';
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
const listData: Record<string, string>[] = [];
for (let i = 0; i < 23; i++) {
listData.push({
href: 'https://www.antdv.com/',
title: `ant design vue part ${i}`,
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
description:
'Ant Design, a design language for background applications, is refined by Ant UED Team.',
content:
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
});
}
export default defineComponent({
components: {
StarOutlined,
LikeOutlined,
MessageOutlined,
},
name: 'Home',
setup(){
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const actions: Record<string, string>[] = [
{ type: 'StarOutlined', text: '156' },
{ type: 'LikeOutlined', text: '156' },
{ type: 'MessageOutlined', text: '2' },
];
console.log('set up');
//使用ref进行数据绑定
const ebooks=ref();
// 使用reactive进行数据绑定
const ebooks1=reactive({books:[]})
onMounted(()=>{
axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.value=data.content;
ebooks1.books=data.content;
})
})
return{
listData,
pagination,
actions,
ebooks1: ebooks,
ebooks2:toRef(ebooks1,"books")
}
}
});
</script>
重新编译运行，查看效果如下：
2.2、接口返回数据在列表显示
明显现在，可以看到想要用的列表样式已经在页面中成功展示了，但这并不是我想要的，我想要的是后端接口返回数据在此处展示，也就是数据源，接下来,我们再次调整Home的代码，
示例代码如下：
<template>
<a-layout>
`<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>`
<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="ebooks1">
<template #renderItem="{ item }">
<a-list-item key="item.name">
<template #actions>
<span v-for="{ type, text } in actions" :key="type">
<component v-bind:is="type" style="margin-right: 8px" />
{{ text }}
</span>
</template>
<a-list-item-meta :description="item.description">
<template #title>
<a :href="item.href" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ item.name }}</a>
</template>
<template #avatar><a-avatar :src="item.cover" /></template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</a-layout>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';
import axios from 'axios';
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
const listData: Record<string, string>[] = [];
for (let i = 0; i < 23; i++) {
listData.push({
href: 'https://www.antdv.com/',
title: `ant design vue part ${i}`,
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
description:
'Ant Design, a design language for background applications, is refined by Ant UED Team.',
content:
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
});
}
export default defineComponent({
components: {
StarOutlined,
LikeOutlined,
MessageOutlined,
},
name: 'Home',
setup(){
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const actions: Record<string, string>[] = [
{ type: 'StarOutlined', text: '156' },
{ type: 'LikeOutlined', text: '156' },
{ type: 'MessageOutlined', text: '2' },
];
console.log('set up');
//使用ref进行数据绑定
const ebooks=ref();
// 使用reactive进行数据绑定
const ebooks1=reactive({books:[]})
onMounted(()=>{
axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.value=data.content;
ebooks1.books=data.content;
})
})
return{
listData,
pagination,
actions,
ebooks1: ebooks,
ebooks2:toRef(ebooks1,"books")
}
}
});
</script>
<style>
.ant-layout-sider{
float: left;
}
</style>
重新编译运行，查看效果如下：
2.3、接口数据改造
很明显，列表数据太少，我对接口进行改造，让其返回多条数据。
我们从service中，不难看出我们做的是，不管传入什么，都是写死的走的模糊查询，这里我们改成动态SQL即可，
示例代码如下：
package com.rongrong.wiki.service;
import com.rongrong.wiki.domain.EBook;
import com.rongrong.wiki.domain.EBookExample;
import com.rongrong.wiki.mapper.EBookMapper;
import com.rongrong.wiki.req.EBookReq;
import com.rongrong.wiki.resp.EBookResp;
import org.springframework.stereotype.Service;
import org.springframework.util.ObjectUtils;
import javax.annotation.Resource;
import java.util.List;
import static com.rongrong.wiki.util.CopyUtil.copyList;
/**
* @author rongrong
* @version 1.0
* @description
* @date 2021/10/13 23:09
*/
@Service
public class EBookService {
@Resource
private EBookMapper eBookMapper;
public List<EBookResp> list(EBookReq eBookReq) {
EBookExample eBookExample = new EBookExample();
//此处代码的意思相当于，搞了一个Sql的where条件
EBookExample.Criteria criteria = eBookExample.createCriteria();
//划波浪线为不推荐使用，这里我们去看源代码做个替换即可
if(!ObjectUtils.isEmpty(eBookReq.getName())){
criteria.andNameLike("%"+eBookReq.getName()+"%");
}
List<EBook> eBookList = eBookMapper.selectByExample(eBookExample);
//List<EBookResp> eBookRespList = new ArrayList<>();
//for (EBook eBook: eBookList) {
// //EBookResp eBookResp = new EBookResp();
// ////spring boot 自带的BeanUtils完成对象的拷贝
// //BeanUtils.copyProperties(eBook, eBookResp);
// //eBookResp.setId(12345L);
// //单体复制
// EBookResp copy = copy(eBook, EBookResp.class);
// eBookRespList.add(copy);
//}
//列表复制
List<EBookResp> respList = copyList(eBookList, EBookResp.class);
return respList;
}
}
查看接口返回数据，如下：
2.4、list列表一行显示为多条数据
接口改造完成，接着需要对列表显示内容进行修改，同样在list列表找到栅格列表，我们还在home中修改，示例代码如下：
<template>
<a-layout>
`<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>`
<a-list item-layout="vertical" size="large"
:grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">
<template #renderItem="{ item }">
<a-list-item key="item.name">
<template #actions>
<span v-for="{ type, text } in actions" :key="type">
<component v-bind:is="type" style="margin-right: 8px" />
{{ text }}
</span>
</template>
<a-list-item-meta :description="item.description">
<template #title>
<a :href="item.href" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ item.name }}</a>
</template>
<template #avatar><a-avatar :src="item.cover" /></template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</a-layout>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';
import axios from 'axios';
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
const listData: Record<string, string>[] = [];
export default defineComponent({
components: {
StarOutlined,
LikeOutlined,
MessageOutlined,
},
name: 'Home',
setup(){
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const actions: Record<string, string>[] = [
{ type: 'StarOutlined', text: '156' },
{ type: 'LikeOutlined', text: '156' },
{ type: 'MessageOutlined', text: '2' },
];
console.log('set up');
//使用ref进行数据绑定
const ebooks=ref();
// 使用reactive进行数据绑定
const ebooks1=reactive({books:[]})
onMounted(()=>{
axios.get("http://localhost:8888/ebook/list?name=").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.value=data.content;
ebooks1.books=data.content;
})
})
return{
pagination,
actions,
ebooks1: ebooks,
ebooks2:toRef(ebooks1,"books")
}
}
});
</script>
<style>
.ant-layout-sider{
float: left;
}
</style>
知识点：
:grid="{ gutter: 16, column: 4 }"，是进行栅格显示，栅格间隔16，每行显示4个- 这里要删除:
pagination="pagination"，即分页显示
再来重新编译，查看效果如下：
2.5、列表内容前图标样式修改
一切看是很好，但感觉是图书封面有点小不好看，如下图：
来接着改样式，只需在home里调整即可，示例代码如下：
html
<template>
<a-layout>
`<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>`
<a-list item-layout="vertical" size="large"
:grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">
<template #renderItem="{ item }">
<a-list-item key="item.name">
<template #actions>
<span v-for="{ type, text } in actions" :key="type">
<component v-bind:is="type" style="margin-right: 8px" />
{{ text }}
</span>
</template>
<a-list-item-meta :description="item.description">
<template #title>
<a :href="item.href" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ item.name }}</a>
</template>
<template #avatar><a-avatar :src="item.cover" /></template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</a-layout>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';
import axios from 'axios';
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
const listData: Record<string, string>[] = [];
export default defineComponent({
components: {
StarOutlined,
LikeOutlined,
MessageOutlined,
},
name: 'Home',
setup(){
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const actions: Record<string, string>[] = [
{ type: 'StarOutlined', text: '156' },
{ type: 'LikeOutlined', text: '156' },
{ type: 'MessageOutlined', text: '2' },
];
console.log('set up');
//使用ref进行数据绑定
const ebooks=ref();
// 使用reactive进行数据绑定
const ebooks1=reactive({books:[]})
onMounted(()=>{
axios.get("http://localhost:8888/ebook/list?name=").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.value=data.content;
ebooks1.books=data.content;
})
})
return{
pagination,
actions,
ebooks1: ebooks,
ebooks2:toRef(ebooks1,"books")
}
}
});
</script>
<style scoped>
.ant-layout-sider{
float: left;
}
.ant-avatar {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 8%;
margin: 5px 0;
}
</style>
再次重新编译，查看下过如下：
到此这篇关于Vue3 列表界面数据展示详情的文章就介绍到这了,更多相关Vue3 列表界面数据展示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
赞 (0)
相关推荐
-
使用Vue3进行数据绑定及显示列表数据
目录 一.与 Vue2 对比 1. Vue3 新特性 2. Vue2.Vue3 响应原理对比 3.重写数组的方法,检测数组变更 4.直观感受 二.使用Vue3进行数据绑定示例 1.使用ref实现数据绑定 2.使用reactive实现数据绑定 三.写在最后 一.与 Vue2 对比 1. Vue3 新特性 数据响应重新实现( ES6 的 proxy 代替 Es5 的 Object.defineProperty ) 源码使用 ts 重写,更好的类型推导 虚拟 DOM 新算法(更快,更小) 提供了 co
-
Vue3 列表界面数据展示详情
目录 一.列表界面展示示例 2.进行数据显示 2.1.组件在列表显示 2.2.接口返回数据在列表显示 2.3.接口数据改造 2.4.list列表一行显示为多条数据 2.5.列表内容前图标样式修改 一.列表界面展示示例 现在要做的就是把打到页面的数据,带样式,也就是说好看点显示. 之前我们在<Vue3(二)集成Ant Design Vue>这篇文章中,有提及组件的使用,对于一个前端不是很好(后端也不咋的),本着拿来主义,我们能现成的是最好.最省事的方式了. 直白点说就是,找Ant Design
-
vue实现点击按钮“查看详情”弹窗展示详情列表操作
html: <template> <div> <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}"> <Table stripe class="task-table" :columns="columnsName4" :data="task
-
Vue+elementUI实现动态展示列表的数据
目录 Vue elementUI动态展示列表的数据 需求描述 Vue elementUI注意事项 多选框对应List<object> 输入框判断条件 自定义弹窗格式 Vue elementUI动态展示列表的数据 需求描述 活动查看的时候,根据后台返回的数据,动态渲染列和每行数据. 后台返回的数据结构如下 html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName&quo
-
Pandas中DataFrame数据删除详情
目录 1.根据默认的行列索引操作 1.1行删除 1.2列删除 2.根据自定义的行列索引操作 2.1行删除 2.2列删除 本文介绍Pandas中DataFrame数据删除,主要使用drop.del方式. # drop函数的参数解释 drop( self, labels=None, # 就是要删除的行列的标签,用列表给定; axis=0, # axis是指处哪一个轴,0为行(默认),1为列; index=None, # index是指某一行或者多行 columns=None, # columns是指
-
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示
-
vue开发chrome插件，实现获取界面数据和保存到数据库功能
前言 最近在评估项目时,要开启评估平台,查看平台和保存平台,感觉非常繁琐,开发了一款可以获取评估平台数据,查看项目排期和直接保存数据到数据库的chrome插件,由于我需要使用之前vue封装的一个日历插件,这里就用vue来开发这个插件. 开发前准备 要开发一个chrome插件,我们首先需要了解chrome插件的基本结构和对应的功能. 每个扩展的文件类型和目录数量有所不同,但都必须有 manifest. 一些基本但有用的扩展程序可能仅由 manifest 及其工具栏图标组成. manifest.js
-
Python遍历目录下文件、读取、千万条数据合并详情
目录 一.使用Python进行文件和文件夹的判断 二.使用Python完整的获取所有文件及文件夹并读取相应的文件 三.使用Python合并数据 append的使用 一.使用Python进行文件和文件夹的判断 递归 :主要目的就是遍历文件夹和文件 对文件夹和文件进行属性判断 首先对文件夹进行遍历,看文件夹里有什么样的文件,读取出文件夹中的所有文件 import os path= "./data" #路径 files = os.listdir(path) #os.listdir() 方法用
-
Python数据分析应用之Matplotlib数据可视化详情
目录 简述 掌握绘图基础语法与基本参数 掌握pyplot基础语法 pyplot中的基础绘图语法 包含子图的基础语法 调节线条的rc参数 调节字体的rc参数 分析特征间的关系 绘制散点图 绘制2000-2017年个季度过敏生产总值散点图 绘制2000-2017年各季度国民生产总值散点图 绘制折线图 绘制2000-2017年各季度过敏生产总值折线图 2000~ 2017年各季度国民生产总值点线图 2000~ 2017年各季度国民生产总值折线散点图 任务实现 任务1 任务2 分析特征内部数据分布与分散
-
vue 实现列表跳转至详情且能添加至购物车功能
目录 效果概述: 具体效果: 实现后效果图: 大致代码思路 main.js 代码 移动端rem适配代码 解决跨域问题,在vue.config.js里添加代码 实现路由跳转页代码 app根组件代码 效果列表页代码 详情页代码 购物车页面代码 vuex页面代码 效果概述: 列表页面显示数据,点击跳转到对应的详情页,详情页可以添加并跳转到购物车,购物车具有常见功能. 具体效果: 1.所有页面根据效果图100%还原.2.列表页面通过axios请求拿到数据并显示.3.跳转到详情页时,显示对应列表的数据.4
-
jquery mobile界面数据刷新的实现方法
JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作. 为什么必须做refresh操作操作呢?因为JQM在做页面渲染的时候,为了使样式跟客户端程序相似, 隐藏了原始的标签然后用一些新的标签和自定义的样式来表现原标签,其实新样式的标签已经不是原来的标签,所以更新了数据必须做refresh操作. 各类标签的刷新 1.Textarea fields $('body').prepe