其他分享
首页 > 其他分享> > elementUI table 组件动态多选表头

elementUI table 组件动态多选表头

作者:互联网

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>elementUI table 组件动态多选表头</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="public/vue.min.js"></script>
  <link rel="stylesheet" href="public/element/index.css">
  <script src="public/element/index.js"></script>
</head>

<body>
  <div id="app">
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选
    </el-checkbox>
    <el-checkbox-group v-model="checkedOptions" @change="handleCheckedChange">
      <el-checkbox v-for="item in tableTitleList" :key="item.prop" :label="item.label" v-model="item.isShow">
      </el-checkbox>
    </el-checkbox-group>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column v-for="column in selectionArr" :fixed="column.fixed" :prop="column.prop" v-if="column.isShow"
        :label="column.label" :width="column.width">
        <template slot-scope="scope">
          <el-row @click.native="clickChange(scope.$index)">asd</el-row>
        </template>
      </el-table-column>

    </el-table>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          checkAll: false, // 全选
          checkedOptions: [], // 单选按钮
          allElection: [], // 全选数组
          selectionArr: [], // 选中的数据

          tableTitleList: [{
              fixed: true,
              prop: "date",
              label: "日期",
              widthEnable: false,
              isShow: true,
              width: "150"
            },
            {
              prop: "name",
              label: "姓名",
              widthEnable: false,
              isShow: true,
              width: "120",
            },
            {
              prop: "province",
              label: "省份",
              widthEnable: false,
              isShow: true,
              width: "120",
            },
            {
              prop: "city",
              label: "市区",
              widthEnable: false,
              isShow: true,
              width: "120",
            },
            {
              prop: "address",
              label: "地址",
              widthEnable: false,
              isShow: true,
              width: "auto",
            },
            {
              prop: "zip",
              label: "邮编",
              widthEnable: false,
              isShow: true,
              width: "auto",
            },
          ],
          tableData: [{
            date: '2016-05-02',
            name: '王小虎1',
            province: '上海',
            city: '普陀区',
            list: [{
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
            ],
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎2',
            province: '上海',
            city: '普陀区',
            list: [{
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
            ],
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎3',
            province: '上海',
            list: [{
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
            ],
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎4',
            province: '上海',
            list: [{
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
              {
                name: "sertg"
              },
            ],
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }],
        }
      },
      mounted() {
        this.allChecked();
        this.defaultCheckSelection();
      },

      methods: {
        clickChange(index) {
          console.log(index)
        },
        defaultCheckSelection() { // 初始化 默认全部选中
          this.checkedOptions = this.allElection;
          let checkedCount = this.checkedOptions.length;
          this.checkAll = checkedCount === this.tableTitleList.length;
          this.getChecked(this.checkedOptions);
        },

        allChecked() { // 全选数组
          this.allElection = [];
          for (var i = 0; i < this.tableTitleList.length; i++) {
            this.allElection.push(this.tableTitleList[i].label) //label为数据里唯一值,可替换
          }
        },
        getChecked(selectionArr) { // 获取选中的对象
          this.selectionArr = [];
          for (var i = 0; i < this.tableTitleList.length; i++) {
            for (var j = 0; j < selectionArr.length; j++) {
              if (selectionArr[j] === this.tableTitleList[i].label) { //label为数据里唯一值,可替换
                this.selectionArr.push(this.tableTitleList[i])
              }
            }
          }
        },
        handleCheckAllChange(val) { // 全选
          this.allChecked();
          this.checkedOptions = val ? this.allElection : [];
          this.cancelAll = false;
          this.getChecked(this.checkedOptions);
          console.log(this.selectionArr)
        },
        handleCheckedChange(value) { // 单个选中
          let checkedCount = value.length;
          if (checkedCount === this.tableTitleList.length) {
            this.checkAll = true
            this.cancelAll = false
          } else {
            this.checkAll = false
            this.cancelAll = false
          }
          this.getChecked(value);
          console.log(this.selectionArr)
        }
      }

    })
  </script>


</body>

</html>

标签:false,name,elementUI,普陀区,表头,label,sertg,selectionArr,table
来源: https://www.cnblogs.com/JaneLifeBlog/p/16427561.html