手表网站哪个好,惠州网站优化,网站建立的研究方案,wordpress version这个小功能我大概花了小半天的时间才实现#xff0c;所以无比痛恨给我提这个需求的人#xff0c;还好最后没有放弃#xff0c;谨以此博客作为记录我被迫走上前端之路的第n天#xff01;#xff01;#xff01; 代码来自项目里面的一部分#xff0c;所以可能有点乱#… 这个小功能我大概花了小半天的时间才实现所以无比痛恨给我提这个需求的人还好最后没有放弃谨以此博客作为记录我被迫走上前端之路的第n天 代码来自项目里面的一部分所以可能有点乱# 点击事件 这里当isEdit值为true时显示保存否则显示历史回溯 div classimport clickhistoryBack {{ isEdit ? 保存 : 历史回溯 }}/div表格
下述代码中idtableRef是一定要设置的tableRef可自定义不用跟我一样但是js里面用的时候要保持同步 Table :columnscolumns :data-sourcedataSource :paginationfalse :borderedtrue:scroll{ x: max-content, y: calc(100vh - 200px) } rowKeyinfo_date idtableReftemplate #bodyCell{ column, text, index }!--如果该列为deviation_cause则进行自定义设置--template v-ifcolumn.dataIndex deviation_cause!--如果isEdit为true显示文本输入框否则显示text--span v-ifisEditInput.TextArea v-model:valuedataSource[index][column.dataIndex] //spandiv v-else{{ text }}/div/template/template/Tablejs部分实现
const isEdit ref(false); // 定义并初始化isEdit
// 历史回溯
const historyBack () {isEdit.value !isEdit.value; // 点击事件发生isEdit值随之变化// 这一部分就是实现滚动条滑倒最后的核心代码nextTick(() {const table document.getElementById(tableRef); //定位到表格if (table) {const scrollableArea table.querySelector(.ant-table-body); // 组件用的是antd的表格if (scrollableArea) {scrollableArea.scrollLeft scrollableArea.scrollWidth; //滚动条滚动到最右侧}}});
}
