element table 自定义列,字段拆成新字段名并加下标

变成

源对象修改为,拆分逗号后,形成新的字段

        let data = response.rows
        let num = 0;
        const result = data.map((obj) => {
          const { code,...rest } = obj;
          const splitCodes = code.split(",");
          const codeObj = {};
          splitCodes.forEach((diagCode, i) => {
            codeObj[`code${i + 1}`] = code;
          });
          num = num > splitCodes.length ? num : splitCodes.length;
          num3 = num3 > splitCodes3.length ? num3 : splitCodes3.length;
          return {
            ...rest,
            ...codeObj,
          };
        });
        插入新列名
        for (let index = 0; index < num; index++) {
          this.column.push({
            label: "新名字" + (index+1),
            prop: "code" + (index+1),
          });
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果你在使用 Element UI 的 el-table 组件,并且想要自定义排序字段名字,可以通过使用 scoped slots 中的 header 自定义表头内容,然后在其中定义排序字段名字。 例如,如果你的数据中有一个名为 name 的字段,但是你想要在表格中将其显示为 "姓名",并使用该字段进行排序,你可以这样做: ```html <el-table :data="tableData" :sort-by="'name'"> <el-table-column prop="name" label="姓名"> <template slot="header"> <span @click="changeSort('name')">姓名</span> </template> </el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 在上面的代码中,我们使用了 `:sort-by="'name'"` 来指定使用 name 字段进行排序。然后在姓名表头的 scoped slot 中,我们定义了一个 `changeSort` 方法来切换排序方向,并将排序字段名字设为 "name"。 你可以根据自己的需要修改代码中的字段名字和表头显示内容。 ### 回答2: 在使用Element UI的el-table组件进行表格展示时,可以通过自定义排序名字字段来实现对数据的排序功能。 首先,在el-table的columns配置中,通过设置sortable属性为true,将该字段设置为可排序的。例如: ```html <el-table :data="tableData" border> <el-table-column prop="name" label="姓名" sortable></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> ``` 其中,prop属性指定了数据对象中对应的字段,label属性用于显示表头的名称。通过给姓名字段的el-table-column添sortable属性,即可实现对该字段的排序。 接着,在Vue实例中,可以使用自定义的排序方法对姓名字段进行排序。例如,在data中定义一个sortMethod方法来处理排序逻辑: ```javascript data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }, ] }; }, methods: { sortMethod(a, b) { return a.localeCompare(b); // 使用localeCompare方法进行字符串的排序 } } ``` 最后,将sortMethod方法通过升序(ascending)或降序(descending)排序传递给el-table的sort-method属性,即可实现对姓名字段的自定义排序。 ```html <el-table :data="tableData" border> <el-table-column prop="name" label="姓名" sortable :sort-method="sortMethod"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> ``` 这样,点击姓名表头便可以根据自定义的排序方法对姓名字段进行排序了。通过以上步骤,就可以实现el-table组件的自定义排序名字字段的功能。 ### 回答3: 在el-table中自定义排序名字字段可以通过使用自定义排序函数来实现。首先,在el-table-column标签中添sortable属性,并设置为custom。然后,在该标签中添一个scoped-slot,命名为sort-method,用于指定排序的规则。 例如,我们要按照名字的长度进行排序,可以这样写: ``` <el-table-column prop="name" label="名字" sortable="custom"> <template slot-scope="scope"> {{scope.row.name}} </template> <template slot="sort-method" slot-scope="scope"> {{scope.$index}} <!-- 自定义排序函数 --> {{scope.store.data.sort((a, b) => a.name.length - b.name.length)}} </template> </el-table-column> ``` 在sort-method slot中,scope参数包含了访问原始数据、排序方法等信息。我们可以使用scope.store.data来访问原始数据,并使用sort方法对数据进行排序。在这个例子中,我们通过获取名字字段的长度来进行排序。 当你在el-table中点击名字的表头时,el-table会调用我们定义的sort-method函数对数据进行排序,然后渲染表格。 希望这个回答能满足你的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值