项目表格功能实现

问题描述：```复选框变成单选，操作按钮只有复选框被选中时，才会被触发，

    <el-table
      :header-cell-style="{background:'#f9f9f9',color:'#333',fontWeight:'600'}"
      :data="tableData"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column :index="0" width="55px">
        <template slot-scope="scope">
          <el-checkbox @change="checked_change(scope.row)" v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" sortable width="80%"></el-table-column>
      <el-table-column label="IP地址" prop="ip"></el-table-column>
      <el-table-column label="VCPU" prop="vcpu" width="90%" sortable align="center"></el-table-column>
      <el-table-column label="内存" prop="memory" width="90%"></el-table-column>
      <el-table-column label="存储(已使用/置备)" prop="storage" width="140%" :formatter="formatter"></el-table-column>
      <el-table-column prop=" network" label="网络">
        <template slot-scope="scope">
          <div
            :style="{color:scope.row.network=='已连接'?'#2cb663':'#f05a57'}"
          >{{scope.row.network}}</div>
        </template>
      </el-table-column>
      <el-table-column label="运行时间" prop="time"></el-table-column>
      <el-table-column>
        <template>
          <ul class="tb_icon">
            <li style="border:1px solid #ccc">
              <i class="iconfont icon-gantanhao"></i>
            </li>
            <li style="border:1px solid #ccc">
              <i class="iconfont icon-bao"></i>
            </li>
            <li style="border:1px solid #ccc">
              <i class="iconfont icon-liebiao"></i>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <ul class="tb_icon">
            <li class="off" @click="offDisk($event,scope.row)"></li>
            <li class="delete" @click="delDisk($event,scope.row)"></li>
            <li class="edit" @click="editDisk($event,scope.row)"></li>
            <li class="change" @click="changeDisk($event,scope.row)"></li>
          </ul>
        </template>
      </el-table-column>
    </el-table>

export default {
  data() {
    return {
  //表格数据
      tableData: [
        {
          name: "cds1",
          ip: "192.168.1.250",
          vcpu: "1",
          memory: "16GB",
          storage: "100GB/100GB",
          network: "已连接",
          time: "1天5小时",
          checked: false
        },
        {
          name: "cds2",
          ip: "192.168.1.250",
          vcpu: "2",
          memory: "16GB",
          storage: "200GB/100GB",
          network: "已连接",
          time: "1天5小时",
          checked: false
        },
        {
          name: "cds3",
          ip: "192.168.1.250",
          vcpu: "3",
          memory: "16GB",
          storage: "200GB/100GB",
          network: "未连接",
          time: "1天5小时",
          checked: false
        },
        {
          name: "cds4",
          ip: "192.168.1.250",
          vcpu: "4",
          memory: "16GB",
          storage: "400GB/100GB",
          network: "已连接",
          time: "1天5小时",
          checked: false
        },
        {
          name: "cds5",
          ip: "192.168.1.250",
          vcpu: "5",
          memory: "16GB",
          storage: "500GB/100GB",
          network: "已连接",
          time: "1天5小时",
          checked: false
        }
      ],
      }
      }，
       methods: {
    //复选框变单选

    // 头部表格checked
    checked_change(row) {
      if (row.checked) {
        this.tableData.forEach((el, i) => {
          el.checked = false;
        });
        row.checked = true;
      }
    },

    //开启虚拟机
    offDisk(e, row) {
      if (row.checked) {
        if (e.target.className.indexOf("on") == -1) {
          e.target.className = "on"; //切换按钮样式
          //写逻辑
        } else {
          e.target.className = "off"; //切换按钮样式
          //写逻辑
        }
      } else {
        this.$message.warn("请先选中一行");
      }
    },
    //删除虚拟机
    delDisk(e, row) {
      // this.$eventBus.$emit("showShade", !this.delDisk_show);
      // this.delDisk_show = true;
      if (row.checked) {
        if (e.target.className.indexOf("delete_light") == -1) {
          e.target.className = "delete_light"; //切换按钮样式
          this.$eventBus.$emit("showShade", !this.delDisk_show);
          this.delDisk_show = true;
          //写逻辑
        } else {
          e.target.className = "delete"; //切换按钮样式
          //写逻辑
        }
      } else {
        this.$message.warn("请先选中一行");
      }
    },
    //添加虚拟机
    editDisk(e, row) {
      if (row.checked) {
        if (e.target.className.indexOf("edit_light") == -1) {
          e.target.className = "edit_light"; //切换按钮样式
          //写逻辑
        } else {
          e.target.className = "edit"; //切换按钮样式
          //写逻辑
        }
      } else {
        this.$message.warn("请先选中一行");
      }
    },
    //交换虚拟机
    changeDisk(e, row) {
      if (row.checked) {
        if (e.target.className.indexOf("change_light") == -1) {
          e.target.className = "change_light"; //切换按钮样式
          //写逻辑
        } else {
          e.target.className = "change"; //切换按钮样式
          //写逻辑
        }
      } else {
        this.$message.warn("请先选中一行");
      }
    },
    //头部表格formatter属性，它用于格式化指定列的值
    formatter(row, column) {
      return row.storage;
    },
```}，

<style lang="stylus" scoped>```
      .tb_icon
        display: flex
        margin-bottom: 0
        li
          margin: 0 5px
          width: 20px
          height: 20px
          display: flex
          justify-content: center
          align-items: center
          cursor: pointer
        .off
          background: url('../../../assets/images/virtua-off.png') no-repeat
        .delete
          background: url('../../../assets/images/virtua-delete.png') no-repeat
          &:hover
            background: url('../../../assets/images/virtua-delete-activa.png') no-repeat
        .edit
          background: url('../../../assets/images/virtua-edit.png') no-repeat
          &:hover
            background: url('../../../assets/images/virtua-edit-active.png') no-repeat
        .change
          background: url('../../../assets/images/virtua-change.png') no-repeat
          &:hover
            background: url('../../../assets/images/virtua-change-active.png') no-repeat
        .on
          background: url('../../../assets/images/virtua-on.png') no-repeat
        .delete_light
          background: url('../../../assets/images/virtua-delete-light.png') no-repeat
        .edit_light
          background: url('../../../assets/images/virtua-edit-light.png') no-repeat
        .change_light
          background: url('../../../assets/images/virtua-change-light.png') no-repeat
``</style>`

``