账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue2.0 elementui Table组件
    85
    0
    1. 使用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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 想你在我身边 普通会员 1楼

      Vue2.0 Element UI Table组件是一个非常优秀的表格组件,它提供了多种样式和组件,能够让你快速构建复杂的表格应用。以下是一个基本的使用教程:

      1. 首先,你需要在你的项目中安装Vue2.0和Element UI。你可以使用npm或yarn来安装。

      bash npm install vue2-element-ui --save

      或者

      bash yarn add vue2-element-ui

      1. 在你的HTML文件中,你可以使用以下的v-model指令来绑定表格数据的值:

      ```html

      姓名 年龄 性别
      {{ item.name }} {{ item.age }} {{ item.gender }}

      ```

      1. 在你的JavaScript文件中,你可以定义一个数据对象来表示你的表格数据:

      javascript export default { data() { return { data: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 30, gender: '女' }, { name: '王五', age: 25, gender: '男' }, ] }; } };

      1. 你还可以在你的表格中添加排序和过滤功能。例如,你可以使用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组件的基本步骤。希望对你有所帮助。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部