- 85
- 0
- 使用elementUI的table组件的时候,数据有两级data--> stock (stock的值需要遍历出来插入表格的某一列)
{
"code": 0,
"data": {
"dropship": false,
"Price": "126,000",
"realPrice": "126,000",
"skuId": 10023280,
"skuName": "CHIL SCHOOL Susu Coklat Box - 800gr",
"spuId": 687033,
"status": "on the shelf",
"stock": {
"Jakarta DC": "117",
"Surabaya": "0",
"Medan": "0",
"Pontianak": "0"
},
"stockPrice": "118,222"
},
"desc": "SUCCESS",
"message": "SUCCESS",
"msg": "SUCCESS",
"success": true
}
stock字段怎么处理后渲染进去呢?prop属性只能绑对象,字符串不能识别。
我使用
<el-table-column prop="stockTpl" label="STOCK" align="center" v-model="handlerStock" ></el-table-column>
先从数据里取出stockmap对象,然后遍历出属性值放入数组,在methods里加一个处理stocktpl的函数,然后再表格里渲染。
但是结果还是没有任何效果。
2.我的功能是输入点击按钮添加,每次添加一条,如果像这样渲染进去的数据,后面追加数据是不是只有尝试数组更新检测的编译方法?
- 共 0 条
- 全部回答
-
想你在我身边 普通会员 1楼
Vue2.0 Element UI Table组件是一个非常优秀的表格组件,它提供了多种样式和组件,能够让你快速构建复杂的表格应用。以下是一个基本的使用教程:
- 首先,你需要在你的项目中安装Vue2.0和Element UI。你可以使用npm或yarn来安装。
bash npm install vue2-element-ui --save或者
bash yarn add vue2-element-ui- 在你的HTML文件中,你可以使用以下的v-model指令来绑定表格数据的值:
```html
姓名 年龄 性别 {{ item.name }} {{ item.age }} {{ item.gender }} ```
- 在你的JavaScript文件中,你可以定义一个数据对象来表示你的表格数据:
javascript export default { data() { return { data: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 30, gender: '女' }, { name: '王五', age: 25, gender: '男' }, ] }; } };- 你还可以在你的表格中添加排序和过滤功能。例如,你可以使用v-model指令来绑定排序和过滤的属性,然后在你的表格元素中添加v-model指令来绑定排序和过滤的值:
```html
姓名 排序方向 筛选条件 {{ item.name }} {{ item.age }} {{ item.gender }} ```
javascript export default { data() { return { sortField: 'name', sortDir: 'asc', filterField: '', data: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 30, gender: '女' }, { name: '王五', age: 25, gender: '男' }, ] }; }, methods: { sorting() { this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'; this.data.sort((a, b) => { if (this.sortField === 'name') { return a[this.sortField] > b[this.sortField] ? 1 : -1; } else { return a[this.sortField] < b[this.sortField] ? 1 : -1; } }); }, filtering() { if (this.filterField !== '') { this.data = this.data.filter(item => item[this.filterField]); } }, async save() { const sortedData = this.sortData(); await this.$axios.post('/api/data', sortedData); }, }, };这就是使用Vue2.0 Element UI Table组件的基本步骤。希望对你有所帮助。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
