vue + element动态多表头与动态插槽

000
目录

一、需求

满足用户自行配置表格，减少对系统代码维护量。

二、效果

vue + element动态多表头与动态插槽

表头json：

说明：scope（字段名可另取）为是否对该列开启插槽。有propChildren包含多级表头。

   
tableHead: [{
    key: \'1\',
    label: \'日期\',
    prop: \'date\',
    width: \'100\',
    headerAlign: \'center\',
    align: \'center\',
    scope: false,
    sortable: true
  },
  {
    key: \'2\',
    label: \'姓名\',
    prop: \'name\',
    width: \'100\',
    headerAlign: \'center\',
    align: \'center\',
    scope: false,
    sortable: false
  },
  {
    key: \'3\',
    label: \'分析情况\',
    prop: \'analysis\',
    width: \'100\',
    headerAlign: \'center\',
    propChildren: [{
      key: \'31\',
      label: \'同比\',
      prop: \'TB\',
      width: \'100\',
      headerAlign: \'center\',
      align: \'center\',
      scope: true,
      sortable: true
    },
    {
      key: \'32\',
      label: \'环比\',
      prop: \'HB\',
      width: \'100\',
      headerAlign: \'center\',
      align: \'center\',
      scope: true,
      sortable: true
    },]
  },
  {
    key: \'4\',
    label: \'金额\',
    prop: \'price\',
    width: \'100\',
    headerAlign: \'center\',
    align: \'right\',
    scope: false,
    sortable: true
  },
  {
    key: \'5\',
    label: \'地址\',
    prop: \'address\',
    width: \'\',
    headerAlign: \'left\',
    align: \'left\',
    scope: false,
    sortable: false
  }
  ],

三、全部代码

<template>
  <el-table
    :data=\"tableData\"
    stripe
    resizable
    border
    height=\"300\"
    style=\"width: 1000px\"
  >
    <el-table-column
      type=\"index\"
      :index=\"indexMethod\"
      label=\"序号\"
      align=\"center\"
      width=\"60\"
    >
    </el-table-column>
    <el-table-column
      v-for=\"(item, index) in tableHead\"
      :key=\"index\"
      :prop=\"item.prop\"
      :label=\"item.label\"
      :width=\"item.width\"
      :align=\"item.align\"
      :headerAlign=\"item.headerAlign\"
      :sortable=\"item.sortable\"
      show-overflow-tooltip
    >
      <el-table-column
        v-for=\"(item, index) in item.propChildren\"
        :key=\"index\"
        :prop=\"item.prop\"
        :label=\"item.label\"
        :width=\"item.width\"
        :align=\"item.align\"
        :headerAlign=\"item.headerAlign\"
        :sortable=\"item.sortable\"
        show-overflow-tooltip
      >
        <template slot-scope=\"scope\">
          <div v-if=\"item.scope === true\">
            <div v-if=\"scope.row[item.prop] == \'\'\">
              {{ scope.row[item.prop] }}
            </div>
            <div v-else-if=\"scope.row[item.prop] > \'0\'\" style=\"color: green\">
              {{ scope.row[item.prop] }}%<i class=\"el-icon-caret-top\"></i>
            </div>
            <div v-else-if=\"scope.row[item.prop] < \'0\'\" style=\"color: red\">
              {{ scope.row[item.prop] }}%<i class=\"el-icon-caret-bottom\"></i>
            </div>
          </div>
          <div v-else-if=\"scope.row[item.prop] < \'0\'\" style=\"color: red\">
            {{ scope.row[item.prop] }}
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <template slot-scope=\"scope\">
          <div v-if=\"item.scope === true\">
            <div v-if=\"scope.row[item.prop] == \'\'\">
              {{ scope.row[item.prop] }}
            </div>
            <div v-else-if=\"scope.row[item.prop] < \'0\'\" style=\"color: red\">
              {{ scope.row[item.prop] }}
            </div>
             <div v-else-if=\"scope.row[item.prop] > \'0\'\">
              {{ scope.row[item.prop] }}
            </div>
          </div>
        <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      // 单表头  是否对该列进行数据比较，靠scope来判断。
      tableHead: [{
        key: \'1\',
        label: \'日期\',
        prop: \'date\',
        width: \'100\',
        headerAlign: \'center\',
        align: \'center\',
        scope: false,
        sortable: true
      },
      {
        key: \'2\',
        label: \'姓名\',
        prop: \'name\',
        width: \'100\',
        headerAlign: \'center\',
        align: \'center\',
        scope: false,
        sortable: false
      },
      {
        key: \'3\',
        label: \'分析情况\',
        prop: \'analysis\',
        width: \'100\',
        headerAlign: \'center\',
        propChildren: [{
          key: \'31\',
          label: \'同比\',
          prop: \'TB\',
          width: \'100\',
          headerAlign: \'center\',
          align: \'center\',
          scope: true,
          sortable: true
        },
        {
          key: \'32\',
          label: \'环比\',
          prop: \'HB\',
          width: \'100\',
          headerAlign: \'center\',
          align: \'center\',
          scope: true,
          sortable: true
        },]
      },
      {
        key: \'4\',
        label: \'金额\',
        prop: \'price\',
        width: \'100\',
        headerAlign: \'center\',
        align: \'right\',
        scope: false,
        sortable: true
      },
      {
        key: \'5\',
        label: \'地址\',
        prop: \'address\',
        width: \'\',
        headerAlign: \'left\',
        align: \'left\',
        scope: false,
        sortable: false
      }
      ],

      // 数据
      tableData: [{
        date: \'2016-05-02\',
        name: \'王小虎\',
        HB: \'-1.1\',
        TB: \'2.5\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1518 弄\'
      }, {
        date: \'2016-05-04\',
        name: \'王小虎\',
        HB: \'-0.28\',
        TB: \'1.1\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路 1517 弄\'
      }, {
        date: \'2016-05-01\',
        name: \'王小虎\',
        HB: \'28\',
        TB: \'-0.11\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路 1519 弄\'
      }, {
        date: \'2016-05-03\',
        name: \'张三\',
        HB: \'21\',
        TB: \'2.11\',
        price: \'-201.02\',
        address: \'上海市普陀区金沙江路 1516 弄\'
      }, {
        date: \'2016-05-11\',
        name: \'张三\',
        HB: \'0.28\',
        TB: \'-1.1\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路 1516 弄\'
      }, {
        date: \'2016-05-02\',
        name: \'王小虎\',
        HB: \'-0.18\',
        TB: \'-1.15\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1518 弄\'
      }, {
        date: \'2016-05-04\',
        name: \'王小虎\',
        HB: \'-1.01\',
        TB: \'1.1\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路 1517 弄\'
      }, {
        date: \'2016-05-01\',
        name: \'王小虎\',
        HB: \'-28\',
        TB: \'2.11\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路 1519 弄\'
      }, {
        date: \'2016-05-03\',
        name: \'张三\',
        HB: \'\',
        TB: \'0.1\',
        price: \'-200.01\',
        address: \'上海市普陀区金沙江路 1516 弄\'
      }, {
        date: \'2016-05-11\',
        name: \'张三\',
        HB: \'18\',
        TB: \'-0.81\',
        price: \'2982.01\',
        address: \'上海市普陀区金沙江路 1516 弄\'
      }],
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>
© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
JavaScript
# 编程开发# JavaScript
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
27天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
27天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
30天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
27天前 3
css文本两端对齐的实现代码-偶像资源网
css文本两端对齐的实现代码
css文本两端对齐的实现代码
30天前 2
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
27天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
27天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
27天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
30天前 24
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
31天前 23
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
30天前 23
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
30天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容