vue3 ant-design-vue的table添加行后定位到表尾

最新推荐文章于 2024-05-21 14:35:19 发布

m0_52611940

最新推荐文章于 2024-05-21 14:35:19 发布

阅读量688

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_52611940/article/details/128574184

版权

scrollTop

    <a-table :data-source="dataSource" :columns="columns" :pagination="false" style="width: 650px;" class="normal"
      :scroll="{ y: 450 }">
            <template #bodyCell="{ column, text, record, index }">
		        <template v-if="column.dataIndex === 'name'">
		          <div class="editable">
		            <a-input style="width: 160px" class="updateInput" v-model:value="record.name" placeholder="请输入"
		              maxLength="30" />
		          </div>
               </template>
          </template>
      <a-table>
      <script lang=ts" setup>
		      const add = () => {
				  dataSource.value.push({
				    name: '',
				    age: '',
				  })
				  //设置滚动的高度显示内容区域
				  const el: any = document.querySelector('.ant-table-body')
				  //总共添加的所有的内容区域的高度
				  const el1: any = document.querySelector('.ant-table-body .ant-table-tbody')
				  setTimeout(() => {
				    //这个就是每添加一行的总高度
				    const height = el1.clientHeight - el.clientHeight
				    if (height > 0) {
				      //然后让每次点添加就滚动到我们新添加的那行
				      el.scrollTop = height
				
				    }
				  }, 200)
		}
      </script>