博客

效果

html部分

 <div class="change">
      <span style="margin-right: 20px">选择指标</span>
      <a-checkbox-group v-model="checkedList" @change="changeCheckbox">
        <a-checkbox v-for="(item, index) of formTheadOptions" :key="index" :value="item.name">{{ item.name }}
        </a-checkbox>
      </a-checkbox-group>
 </div>

 <div class="m-content">
      <div class="table-box">
        <a-table :scroll="{ x: 1500, y: 500 }" size="middle" :columns="deletedata" @change="pageChange"
          :data-source="goodsList" bordered :pagination="false" rowKey="goodsId">
          <template slot="goodsName" slot-scope="val, item">
            <div class="name-box">
              <div><img :src="item.defaultImage" class="img" alt=""> </div>
              <div class="box-fl">
                <span>{{ item.goodsName }}</span>
                <span><i>货号：</i>{{ item.goodsCode }}</span>
                <span>￥{{ item.packPrice }}~￥{{ item.retailPrice }} </span>
              </div>
            </div>
          </template>
          <template slot="addCartUserCount" slot-scope="val, item">
            <span>{{ item.addCartUserCount }}</span>
          </template>
          <template slot="operation8" slot-scope="val, item">
            <a-button type="link" @click="toDetail(item)">趋势</a-button>
          </template>
        </a-table>
      </div>
    </div>

js部分

<script>
const columns = [
  {
    title: "商品",
    dataIndex: "goodsName",
    key: "goodsName",
    fixed: "left",
    scopedSlots: {
      customRender: "goodsName",
    },
    width: 412,
  },
  {
    title: "商品访客数",
    key: "visitorCount",
    dataIndex: "visitorCount",
    scopedSlots: {
      customRender: "visitorCount",
    },
    sorter: true,
  },
  {
    title: "商品浏览数",
    dataIndex: "viewerCount",
    key: "viewerCount",
    scopedSlots: {
      customRender: "viewerCount",
    },
    sorter: true,
  },
  {
    title: "支付订单数",
    dataIndex: "orderCount",
    key: "orderCount",
    scopedSlots: {
      customRender: "orderCount",
    },
    sorter: true,
  },
  {
    title: "支付买家数",
    dataIndex: "buyerCount",
    key: "buyerCount",
    scopedSlots: {
      customRender: "buyerCount",
    },
    sorter: true,
  },
  {
    title: "成交件数",
    dataIndex: "orderGoodsCount",
    key: "orderGoodsCount",
    scopedSlots: {
      customRender: "orderGoodsCount",
    },
    sorter: true,
  },
  {
    title: "成交金额",
    key: "orderAmount",
    dataIndex: "orderAmount",
    scopedSlots: {
      customRender: "orderAmount",
    },
    sorter: true,
  },
  {
    title: "成交转化率",
    key: "conversionRate",
    dataIndex: "conversionRate",
    scopedSlots: {
      customRender: "conversionRate",
    },
    sorter: true,
  },
  {
    title: "商品收藏人数",
    key: "collectCount",
    dataIndex: "collectCount",
    scopedSlots: {
      customRender: "collectCount",
    },
    sorter: true,
  },
  {
    title: "加购件数",
    key: "addCartCount",
    dataIndex: "addCartCount",
    scopedSlots: {
      customRender: "addCartCount",
    },
    sorter: true,
  },
  {
    title: "加购人数",
    key: "addCartUserCount",
    dataIndex: "addCartUserCount",
    scopedSlots: {
      customRender: "addCartUserCount",
    },
    sorter: true,
  },
  {
    title: "操作",
    key: "operation8",
    scopedSlots: {
      customRender: "operation8",
    },
    width: 112,
    fixed: "right",
  },
];
export default {

  data() {
    return {
      columns, //用于保持数据源不变
	 deletedata: [
        {
          title: "商品",
          dataIndex: "goodsName",
          key: "goodsName",
          fixed: "left",
          width: 412,
          scopedSlots: {
            customRender: "goodsName",
          },
        },
        {
          title: "商品访客数",
          key: "visitorCount",
          scopedSlots: {
            customRender: "visitorCount",
          },
          sorter: true,
          defaultSortOrder: 'descend',
        },
        {
          title: "商品浏览数",
          dataIndex: "viewerCount",
          key: "viewerCount",
          sorter: true,
        },
        {
          title: "支付订单数",
          dataIndex: "orderCount",
          key: "orderCount",
          sorter: true,
        },
        {
          title: "操作",
          key: "operation8",
          scopedSlots: {
            customRender: "operation8",
          },
          width: 112,
          fixed: "right",
        },
      ], //用于保留要删的数据可以做数据回滚的操作
       checkedList: ["商品访客数", "商品浏览数", "支付订单数"],   //这是默认勾选项目
      formTheadOptions: [
        { id: 1, name: "商品访客数" },
        { id: 2, name: "商品浏览数" },
        { id: 3, name: "支付订单数" },
        { id: 4, name: "支付买家数" },
        { id: 5, name: "成交件数" },
        { id: 6, name: "成交金额" },
        { id: 7, name: "成交转化率" },
        { id: 8, name: "商品收藏人数" },
        { id: 9, name: "加购件数" },
        { id: 10, name: "加购人数" },
      ],
      }
   }，
   methods:{
   //选择 指标
    changeCheckbox(checkedList) {
      console.log(checkedList, 'checkedList')
      if (checkedList.length > 0) {
        if (checkedList.length == 1) {
          this.checkedName = checkedList;
        }
        let deletearray = JSON.parse(JSON.stringify(this.columns)); //原始表头长数据
        let deleteList = []; //记录修改后的原表头数据
        checkedList.forEach((item) => {
          for (let i = 0; i < deletearray.length; i++) {
            //判断是要取消显示那一条，并且删除数据中没有这个数据的记录
            if (item === deletearray[i].title) {
              deletearray.splice(i, 1);
              deleteList = deletearray;
            }
          }
        });
        // 获取对比的数据
        let deletemin = this.columns.filter((item) => {
          let idList = deleteList.map((val) => val.title);
          return idList.indexOf(item.title) == -1;
        });
        // 固定头部和尾部的数据
        let headList = [{
          title: "商品", dataIndex: "goodsName", key: "goodsName", fixed: "left", width: 412,
          scopedSlots: {
            customRender: "goodsName",
          },
        },];
        let footList = [{ title: "操作", key: "operation8", scopedSlots: { customRender: "operation8" }, width: 112, fixed: "right", },];
        this.deletedata = headList.concat(deletemin).concat(footList);
      } else {
        this.$message.info('至少保留1个指标');
        this.checkedList = this.checkedName
      }
    },
   }
};
</script>