Question

我为该表创建了一个沙箱，因为我想为每行添加单独的图像。如何添加呢？

Answer 1

您试图实现什么？

您需要将图片添加到数据列表中，例如（请参见冷冻酸奶）：

<div ng-app="app" ng-controller="ctrl as $ctrl">
  <input type="checkbox" ng-model="$ctrl.playerId">
  <my-section ng-if="$ctrl.playerId"><my-section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.min.js"></script>

您需要调整您的createData函数（添加img）：

state = {
    order: "asc",
    orderBy: "calories",
    selected: [],
    data: [
      createData("Cupcake", 305, 3.7, 67, 4.3),
      createData("Donut", 452, 25.0, 51, 4.9),
      createData("Eclair", 262, 16.0, 24, 6.0),
      createData("Frozen yoghurt", 159, 6.0, 24, 4.0, "http://images6.fanpop.com/image/photos/38900000/-Frozen-Yoghurt-frozen-yogurt-38904380-289-300.jpg"),
      createData("Gingerbread", 356, 16.0, 49, 3.9),
      createData("Honeycomb", 408, 3.2, 87, 6.5),
      createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
      createData("Jelly Bean", 375, 0.0, 94, 0.0),
      createData("KitKat", 518, 26.0, 65, 7.0),
      createData("Lollipop", 392, 0.2, 98, 0.0),
      createData("Marshmallow", 318, 0, 81, 2.0),
      createData("Nougat", 360, 19.0, 9, 37.0),
      createData("Oreo", 437, 18.0, 63, 4.0)
    ],
    page: 0,
    rowsPerPage: 5
  };

您需要在表标题中添加一列：

function createData(name, calories, fat, carbs, protein, img) {
  counter += 1;
  return { id: counter, name, calories, fat, carbs, protein, img };
}

（顺便说一下，这些是列，而不是行。））

您需要在表内容中显示数据：

const rows = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)"
  },
  { id: "calories", numeric: true, disablePadding: false, label: "Calories" },
  { id: "fat", numeric: true, disablePadding: false, label: "Fat (g)" },
  { id: "carbs", numeric: true, disablePadding: false, label: "Carbs (g)" },
  { id: "protein", numeric: true, disablePadding: false, label: "Protein (g)" },
  { id: "img", numeric: true, disablePadding: false, label: "Img" }
];

就是这样。

如何在表格单元格中添加图像？

1 个答案: