May I ask, how can such a quotation form be realized? What technologies are required?

example figure 1:

2:

Overview:
example figure is a quotation form for Ctrip backend
the price composition of each item will be a little different
if you move the scroll bar, the leftmost and rightmost columns can remain unchanged

* * because I have just used VUE to build this requirements page
, how to implement such a quotation form? What technologies are required? * *

Mar.21,2022

this style looks a little familiar. I guess antd is used as a framework.

antd-Table


are you asking how to implement the requirements quickly? Or the principle of implementing such a control?

if it is the former, it would be nice to use off-the-shelf solutions of various component libraries, such as ant-d (although there may be colored eggs), element-ui, etc.
if it is the latter, this kind of table with fixed columns is generally not implemented in a table, but through multiple table to render fixed columns and slidable columns respectively, there is no mystery. The only difficulty is the Synchronize of the data and the alignment style of the tables, and so on, which need to be carefully designed.


element-ui fixed columns can be implemented

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e63abb-45a4c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e63abb-45a4c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?