<template>
  <div class="ui-wrap">
      <h3>table</h3>
       <el-table
      :data="tableData01"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
         <template slot-scope="scope">
             <input type="text" v-model="scope.row.date" style="border: none;">
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
        <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">新建</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">修改</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">删除</a>
               <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">更多<i class="el-icon-caret-bottom"></i></a>
            </template>
          </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
      background
      :current-page="1"
      :page-sizes="[10, 20, 30, 100]"
      :page-size="1"
      layout="prev, pager, next, jumper, sizes,total"
      :total="100">
    </el-pagination>
  </div>
  <div>
    <el-form :inline="true">
      <el-form-item style="margin-bottom:0 !important;">
      <el-input placeholder="请输入内容" >
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
  </el-form-item>
   <el-form-item style="margin-bottom:0 !important;float:right;">
    <el-button style="font-size:12px;color:#00102F;">单操作</el-button>
    <el-button style="font-size:12px;color:#00102F;">单操作</el-button>
    <!-- <el-button  style="font-size:12px;color:#00102F;">更多操作<i class="el-icon-arrow-down"></i></el-button> -->
    <el-dropdown @command="handleCommand"  style="margin-left:10px;font-size:12px;border:1px solid #D0D2D7;height:28px;line-height:28px;padding:0 10px;cursor:printer">
  <span>
    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
    <el-dropdown-item command="b">狮子头</el-dropdown-item>
    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
  </el-form-item>
  </el-form>
</div>
   <el-table
    ref="multipleTable02"
    :data="tableData02"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange02">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <!-- <el-button @click="toggleSelection02([tableData02[1], tableData02[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection02()">取消选择</el-button> -->
    <el-checkbox v-model="tabChecked" style="margin-right:10px;"></el-checkbox>
     <el-button @click="toggleSelection02([tableData02[0], tableData02[1],tableData02[2],tableData02[3]])" style="font-size:12px;color:#00102F;">批量添加权限</el-button>
    <el-button @click="toggleSelection02()"  style="font-size:12px;color:#00102F;">批量删除</el-button>
    <el-pagination
     style="display:inline-block;float:right;"
      background
      :current-page="1"
      :page-sizes="[10, 20, 30, 100]"
      :page-size="1"
      layout="prev, pager, next, jumper, sizes,total"
      :total="100">
    </el-pagination>
  </div>
       <el-table
      :data="tableData03"
      style="width: 100%">
      <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline>
          <el-form-item label="商品名称" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
        <p style="border-top:1px dashed #D9DBE0;margin-bottom:0;"><span style="margin-right:10px;margin-left:10px;">镜像特性一键式重置密码&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">主机名称注入&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">用户数据注入&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">磁盘热插拔秘钥注入&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">网卡热插拔</span></p>
      </template>
    </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
        <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">新建</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">修改</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">删除</a>
               <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">更多<i class="el-icon-caret-bottom"></i></a>
            </template>
          </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
     style="display:inline-block;float:right;"
      background
      :current-page="1"
      :page-sizes="[10, 20, 30, 100]"
      :page-size="1"
      layout="prev, pager, next, jumper, sizes,total"
      :total="100">
    </el-pagination>
  </div>
     <el-table
      :data="tableData03"
      style="width: 100%">
      <el-table-column type="expand">
      <template slot-scope="props">
        <!-- <el-form label-position="left" inline>
          <el-form-item label="商品名称" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述" style="width: 33%;margin-bottom:0 !important;">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
        <p style="border-top:1px dashed #D9DBE0;margin-bottom:0;"><span style="margin-right:10px;margin-left:10px;">镜像特性一键式重置密码&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">主机名称注入&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">用户数据注入&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">磁盘热插拔秘钥注入&nbsp;&nbsp;|&nbsp;&nbsp;</span><span style="margin-right:10px;margin-left:10px;">网卡热插拔</span></p> -->
         <el-table
      :data="tableData01"
      style="width: 100%;">
      <el-table-column
        prop="date"
        label="店铺"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
        <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">新建</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">修改</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">删除</a>
               <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">更多<i class="el-icon-caret-bottom"></i></a>
            </template>
          </el-table-column>
    </el-table>
      </template>
    </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
        <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">新建</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">修改</a>
              <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">删除</a>
               <a href="javascript:;" style="text-decoration: none;margin-right:10px;font-size:12px;color:#006DFF;">更多<i class="el-icon-caret-bottom"></i></a>
            </template>
          </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
     style="display:inline-block;float:right;"
      background
      :current-page="1"
      :page-sizes="[10, 20, 30, 100]"
      :page-size="1"
      layout="prev, pager, next, jumper, sizes,total"
      :total="100">
    </el-pagination>
  </div>
  </div>
</template>

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        radio: '1',
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true,
        checked: true,
        input1: '',
        input2: '',
        input3: '',
        textarea: '',
        select: '',
        isClearable: true,
        visible: false,
        ruleForm: {
          age: ''
        },
        rules: {
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
        switchvalue01: true,
        switchvalue02: false,
        switchvalue03: true,
        slidervalue01: 20,
        slidervalue02: [10, 30],
        slidervalue03: [50, 100],
        slidervalue04: 20,
        slidervalue05: 20,
        pagination01: {
          page: 2,
          size: 6,
          total: 6
        },
        pagination02: {
          page: 2,
          size: 8,
          total: 10
        },
        transferdata: generateData(),
        transfervalue: [1, 4],
        tableData01: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tabChecked: false,
        tableData02: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection02: [],
        tableData03: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      };
    },
    methods: {
      messageOpen1() {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success',
          duration: 0,
          showClose: true
        });
      },
      messageOpen2() {
        this.$message({
          message: '这是一条消息提示',
          duration: 0,
          showClose: true
        });
      },
      messageOpen3() {
        this.$message({
          showClose: true,
          message: '警告哦，这是一条警告消息',
          type: 'warning',
          duration: 0
        });
      },
      messageOpen4() {
        this.$message({
          showClose: true,
          message: '警告哦，这是一条警告消息',
          type: 'error',
          duration: 0
        });
      },
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      progressformat(percentage) {
        return percentage === 100 ? '满' : `${percentage}%`;
      },
      progressformat02(percentage) {
        return (percentage > 0 && percentage < 100) ? '加载中' : `${percentage}%`;
      },
      toggleSelection02(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable02.toggleRowSelection02(row);
          });
        } else {
          this.$refs.multipleTable02.clearSelection();
        }
      },
      handleSelectionChange02(val) {
        this.multipleSelection02 = val;
      },
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  };
</script>