`<ul id="list"> <li v-for="(item, index) in listData" :key="index" @click="toArticle(item)"> <div> <div class="imgBox" style="width: 100%;height: 100%;overflow: hidden;"> <img :src="item.img" alt="博客图片" @error="defaultImg()"> </div> </div> <div class="msg" ref="information"> <h3>{{ item.theme }}</h3> <p class="introduce" v-show="introduction">{{ item.introduction }}</p> </div> <p class="pushTime" v-show="introduction"><span style="margin-right: 10px;"></span>{{ item.initialTime.slice(0, 10) }}</p> <p class="popularity" v-show="introduction"><span style="margin-right: 10px;"></span>{{ item.popularity }} </p> </li> </ul> `

根据您提供的代码，我注意到您使用了Vue.js的v-for指令来循环渲染列表项，并且每个列表项包含一个图片和其他内容。在这种情况下，可能会出现grid布局的高度不受max-height限制的情况。

您在li标签中设置了max-height为280px，但是在使用了grid布局的情况下，li标签的高度会根据其内容自动调整，并不受max-height限制。因此，即使设置了max-height为280px，li标签的实际高度可能会超过这个值。

如果您希望li标签的高度受到max-height限制并出现滚动条，可以尝试将li标签的样式设置为：

li {
  max-height: 280px;
  overflow: auto;
}

这样，当li标签的内容超过280px时，会在li标签内部出现垂直滚动条，以便浏览全部内容。请注意，如果li标签的内容高度小于280px，滚动条将不会出现。

另外，请确保父容器（ul元素）也没有设置其他样式或布局属性影响到li标签的高度和滚动条显示。

相关问题

在前端页面中 默认生成了数据如下<template> <div class="content"> <div class="row"> <div class="list"> <ul> <li>序号</li> <li>权限</li> <li>角色</li> <li>账号</li> <li>编辑</li> </ul> </div> </div> <div class="row"> <div class="lists"> <ul v-for="item in dataList" :key="item.id"> <li>{{ item.userid }}</li> <li>{{ item.authority }}</li> <li>{{ item.role }}</li> <li>{{ item.username }}</li> <li @click="ect">编辑</li> </ul> </div> </div> </div> </template> <script setup> import { ref, onMounted } from "vue"; import { getList } from "@/api/user"; const dataList = ref([]); onMounted(async () => { try { const response = await getList(); dataList.value = response.data; } catch (error) { console.error(error); } }); </script> 如何实现对数据修改并且不改变id

对数据进行修改需要在编辑按钮的点击事件中进行处理，可以在方法中接收当前被点击的数据对象，然后将其赋值给一个临时变量，进行修改后再将修改后的数据赋值回去。同时需要确保不改变数据的id。

下面是一个可能的实现方式：

<template>
<div class="content">
<div class="row">
<div class="list">
<ul>
<li>序号</li>
<li>权限</li>
<li>角色</li>
<li>账号</li>
<li>编辑</li>
</ul>
</div>
</div>
<div class="row">
<div class="lists">
<ul v-for="item in dataList" :key="item.id">
<li>{{ item.userid }}</li>
<li>{{ item.authority }}</li>
<li>{{ item.role }}</li>
<li>{{ item.username }}</li>
<li @click="edit(item)">编辑</li>
</ul>
</div>
</div>
</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getList } from "@/api/user";

const dataList = ref([]);
const editedData = ref(null);

onMounted(async () => {
try {
const response = await getList();
dataList.value = response.data;
} catch (error) {
console.error(error);
}
});

const edit = (data) => {
editedData.value = { ...data };
// 弹出编辑框，让用户修改数据
// ...
}

const save = () => {
// 将修改后的数据赋值回去
const index = dataList.value.findIndex((item) => item.id === editedData.value.id);
if (index >= 0) {
dataList.value[index] = { ...editedData.value };
}
// 隐藏编辑框
// ...
}
</script>

在 edit 方法中，我们将当前被点击的数据对象赋值给了 editedData 变量，这样在编辑框中修改数据时，就修改的是这个临时变量中的数据。在 save 方法中，我们根据 editedData 变量中的 id 找到原始数据中对应的索引，然后将修改后的数据赋值回去。这样就实现了对数据的修改而不改变 id 的要求。

补全代码 <div id="box"> <!-- <my-component :stuList="list"></my-component> --> <my-component : ="list" @ ="doDel"></my-component> </div> <script> Vue.component('my-component', { props: ['stuList'], template: <div> <ul> <li v-for="(stu,index) in " :key="index"> {{stu.name}} - {{stu.age}} <button @click="del(index)">删除</button> </li> </ul> </div>, methods: { del: function(value){ this. ('delid', ); } } }); var vm = new Vue({ el: '#box', data: { list: [ { name: '张三', age: 20 }, { name: '李四', age: 21 }, { name: '王五', age: 19 } ] }, methods: { doDel: function(value){ this.list.splice(value, 1); } } }) </script>

box', data: { list: [{name: '张三', age: 18}, {name: '李四', age: 20}, {name: '王五', age: 22}] }, methods: { doDel: function(value){ this. ('list', ); } } }) </script>

<div id="box">
<my-component :stuList="list" @doDel="doDel"></my-component>
</div>
<script>
Vue.component('my-component', {
props: ['stuList'],
template: `<div>
<ul>
<li v-for="(stu,index) in stuList" :key="index">
{{stu.name}} - {{stu.age}}
<button @click="del(index)">删除</button>
</li>
</ul>
</div>`,
methods: {
del: function(index){
this.$emit('doDel', index);
}
}
});
var vm = new Vue({
el: '#box',
data: {
list: [{name: '张三', age: 18}, {name: '李四', age: 20}, {name: '王五', age: 22}]
},
methods: {
doDel: function(index){
this.list.splice(index,1);
}
}
})
</script>