这段代码存在一些语法错误。具体来说：
1. `console.log` 方法中的字符串应该使用引号括起来，例如 `"每页 ${val} 条"` 和 `"当前页: ${val}"`。
2. `toggleContent` 方法应该定义在 `methods` 对象中，并且缺少一个左大括号 `{`。
3. `toggleContent` 方法中的 `console.log` 方法没有使用正确的字符串格式化，应该使用反引号括起来，并在占位符 `${}` 中使用变量名，例如 ``console.log(`当前高度: ${content.style.height}`)``。
4. 在 `v-for` 指令中，应该使用 `v-bind:key` 显式地绑定 `tableData` 数组中每个对象的唯一标识符，例如 `v-for="(item, index) in tableData" v-bind:key="item.number"`。
下面是修正后的代码：
```
<script>
let v = new Vue({
el: '#app',
data: {
value1: '',
value2: '',
pickerOptions: {
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
},
{
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 *
24);
picker.$emit('pick', date);
}
},
{
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 *
24 * 7);
picker.$emit('pick', date);
}
}
]
},
tableData: [
{ number: '1', date: '
2021-
08-01' },
{ number: '2', date: '
2021-
08-01' },
{ number: '3', date: '
2021-
08-01' },
{ number: '4', date: '
2021-
08-01' },
{ number: '5', date: '
2021-
08-01' },
{ number: '6', date: '
2021-
08-01' },
{ number: '7', date: '
2021-
08-01' },
{ number: '8', date: '
2021-
08-01' }
],
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4
},
methods: {
deleteRow(index, rows) {
rows.splice(index, 1);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
toggleContent() {
var content = document.getElementById("content");
var btn = document.getElementById("toggle-btn");
if (content.style.height === "100px") {
content.style.height = "auto";
btn.innerHTML = "收起";
} else {
content.style.height = "100px";
btn.innerHTML = "展开";
}
console.log(`当前高度: ${content.style.height}`);
}
}
});
</script>
<table>
<thead>
<tr>
<th>序号</th>
<th>日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" v-bind:key="item.number">
<td>{{ item.number }}</td>
<td>{{ item.date }}</td>
<td><button @click="deleteRow(index, tableData)">删除</button></td>
</tr>
</tbody>
</table>
<div class="pagination">
<el-pagination
background
layout="sizes, prev, pager, next, jumper"
:current-page.sync="currentPage1"
:page-sizes="[5, 10, 20]"
:page-size="5"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="tableData.length"
></el-pagination>
</div>
<div id="content" style="overflow: hidden; height: 100px;">
这是一段需要展开的内容。
</div>
<button id="toggle-btn" @click="toggleContent">展开</button>
```
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
