表格——含全选反选，可拖动改变大小

最新推荐文章于 2022-11-15 08:16:52 发布

HooRayK

最新推荐文章于 2022-11-15 08:16:52 发布

阅读量403

点赞数

分类专栏：前端文章标签：拖拽大小 table 购物车计算总价前端

本文链接：https://blog.csdn.net/qq_41899579/article/details/103025071

版权

写购物车练习vue父子组件传参

我也不知道我为什么要写这个…本来是研究miniui的拖动表格大小的。
工作用vue，所以用了vue，想到了就用了面向对象，想到什么用什么，没有原因。
有错或有可优化的地方请指教。

一、首先，html+css+js(data)之后样子长这样：

鼠标放右下角的///，按下可拖动大小。table自己调整列宽。
html+css+data

代码：

html：

	<div id="app">
		<!-- 表格外套一层div，拖拽标识相对此div定位，固定在盒子在右下角位置 -->
		<!-- 外层div作用：放拖拽标识；预览改变的大小 -->
        <div class="flex_table">
            <table border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                    	<!-- 全选/全不选 -->
                        <th>
                            <input type="checkbox" name="" id="checkAll">
                        </th>
                        <!-- 列表渲染表头 -->
                        <th v-for="th in tableContent.tableHead" :key="th.field" :value="th.title">{
  {th.title}}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                	<!-- 列表渲染行 -->
                    <tr v-for="tb in tableContent.tableBody" v-if="tb.goods_name" align="center">
                    	<!-- v-if 如果有空数据，不渲染行 -->
                        <td v-if="tb.goods_name">
                        	<!-- 复选框 -->
                            <input type="checkbox" name="take">
                        </td>
                        <!-- 列表渲染每行的单元格 -->
                        <td v-for="(item, idx) in tb" :key="idx">{
  {item}}</td>
                        <td v-if="tb.goods_name">
                            <span class="delete">删除</span>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr align="center">
                        <td>
                        	<!-- 反选按钮 -->
                            <div class="checkRev">反选</div>
                        </td>
                        <td>共计</td>
                        <td colspan="4">￥3516464</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

js：

var app = new Vue({
   
    el: "#app",
    data() {
   
        let dataObj = {
   
            tableContent: {
   
                // 表头数据
                tableHead: [
                    {
   
                        title: "商品名",
                        field: "goods_name",
                        width: ""
                    },
                    {
   
                        title: "商品单价",
                        field: "goods_price",
                        width: ""
                    },
                    {
   
                        title: "数量",
                        field: "goods_amount",
                        width: ""
                    },
                    {
   
                        title: "总价",
                        field: "goods_sum",
                        width: ""
                    }
                ],
                // 内容数据
                tableBody: [
                    {
   
                        goods_name: "idea_vscode", // 商品名
                        goods_price: '999', // 单价
                        goods_amount: '1', // 购买数量
                        goods_sum: "999" // 单种商品总价
                    },
                    {
   
                        goods_name: "idea_vscode",
                        goods_price: '999',
                        goods_amount: '1',
                        goods_sum: "999"
                    },
                    {
   
                        goods_name: "idea",
                        goods_price: '92278',
                        goods_amount: '1',
                        goods_sum: "999"
                    },
                    {
   },
                    {
   
                        goods_name: "idea",
                        goods_price: '999',
                        goods_amount: '5',
                        goods_sum: "999"
                    }, {
   
                        goods_name: "idea",
                        goods_price: '999',
                        goods_amount: '1',
                        goods_sum: "999"
                    }
                ],
                tableFoot: {
   
                    total_price: 0,
                }
            }
        };

        return dataObj;
    },
    computed: {
   
        // 计算总价
        totalPrice() {
   
            // 遍历数组
            this.tableContent.tableBody.forEach(item => {
   
                if (item.goods_name) {
   
                    // 每种商品总价
                    item.goods_sum = item.goods_price * item.goods_amount;
                    // 所有商品总价
                    this.tableContent.tableFoot.total_price += parseInt(item.goods_sum);
                } else {
   
                    return;
                }
            });
            return this.tableContent.tableFoot.total_price;
        }
    },
    methods: {
   }
});

css：

	<style>
        * {
   
            margin: 0;
            padding: 0;
        }

        body {
   
            background: rgba(242, 242, 242, 1);
        }

        .flex_table,
        table {
   
            position: relative;
        }

        table {
   
            background: #ffffff;
        }

        td,
        th {
   
            padding: 5px 16px;
            height: 40px;
            box-sizing: border-box;
        }

        th {
   
            background: #add8e6;
        }

        tbody {
   
            background: rgba(173, 215, 229, 0.1);
        }

        tfoot {
   
            background