muse-ul中data-table表格如何获取勾选项对应的数据

这个框架的表格有个问题，他返回的不是当前选中项的数据而是角标。
所以我们的思路就是已知selects可以拿到所有选中的角标，那我们就循环一下角标然后那对应数据数组内的对应数据就行了。

代码

<template>
  <div>
    <mu-container>
      <!-- z-depth是阴影大小 -->
      <mu-paper :z-depth="1">
        <!-- 
      selectable：是否可选择
      select-all：是否开启全选选择框
      selects.sync="selects"：选择的数组，sync用来双向控制
      checkbox:是否显示 mu-checkbox
      columns="columns"：是否显示列的配置
     -->
        <mu-data-table
          selectable
          :selects.sync="selects"
          checkbox
          :columns="columns"
          :data="list"
        >
          <template slot-scope="scope">
            <td>{{ scope.row.name }}</td>
            <td class="is-right">{{ scope.row.calories }}</td>
            <td class="is-right">{{ scope.row.fat }}</td>
            <td class="is-right">{{ scope.row.carbs }}</td>
            <td class="is-right">{{ scope.row.protein }}</td>
            <td class="is-right">{{ scope.row.iron }}%</td>
          </template>
        </mu-data-table>
        <mu-flex align-items="center" style="padding: 8px" wrap="wrap">
          selects:
          <mu-chip
            delete
            v-for="selectIndex in selects"
            @delete="removeSelect(selectIndex)"
            style="margin: 8px"
            color="green"
            :key="selectIndex"
            >{{ list[selectIndex].name }}</mu-chip
          >
        </mu-flex>
      </mu-paper>
    </mu-container>
    <van-button @click="submit">提交选项</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selects: [],
      selectsvalue: [],
      sort: {
        name: "",
        // order: 'asc'
      },
      //列的显示
      columns: [
        { title: "Dessert (100g serving)", width: 200, name: "name" },
        { title: "Calories", name: "calories", width: 126, align: "center" },
        { title: "Fat (g)", name: "fat", width: 126, align: "center" },
        { title: "Carbs (g)", name: "carbs", width: 126, align: "center" },
        { title: "Protein (g)", name: "protein", width: 126, align: "center" },
        { title: "Iron (%)", name: "iron", width: 126, align: "center" },
      ],
      //表格数据显示
      list: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: 1,
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: 1,
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: 7,
        },
        {
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: 8,
        },
        {
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: 16,
        },
        {
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: 0,
        },
        {
          name: "Lollipop",
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: 2,
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: 45,
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: 22,
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: 6,
        },
      ],
      tableList: [],
    };
  },
  methods: {
    //按钮方法
    submit() {
      //每次保存先清空，否则会把上次保存的数据重复保存进去
      this.tableList = [];
      //遍历每一项selects。i当角标来拿list内的对应角标的数据存到tableList内。
      this.selects.forEach((i) => {
        this.tableList.push(this.list[i].name);
      });
      //打印出来看看
      console.log(this.a, "ceshi");
    },
    
    removeSelect(selectIndex) {
      const index = this.selects.indexOf(selectIndex);
      this.selects.splice(index, 1);
    },
  },
};
</script>