表格应用——插槽slot-watch-分页-列表变色&动态绑定多个样式-弹框拦截确认

表格应用——插槽slot-watch-分页-列表变色&动态绑定多个样式-弹框拦截确认

效果图

代码

第一步：在同层级或components文件夹下新建组件文件copySoft.vue

<template>
  <div class="container">
    <el-dialog
      title="计算机"
      :visible.sync="dialogVisible1"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" label="计算机名称" width="120">
          </el-table-column>
          <el-table-column label="IP地址" width="120">
            <template slot-scope="scope">{{ scope.row.address }}</template>
          </el-table-column>
          <el-table-column prop="ram" label="内存" width="120">
          </el-table-column>
          <el-table-column label="计算机负载">
            <template slot-scope="scope">
              <span :style="randomColor(scope.row.occupancy)">{{
                scope.row.occupancy
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="describe"
            label="计算机描述"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footer-fy">
          <el-pagination
            small
            layout="total,prev,pager,next,jumper"
            :total="tableData.length"
            :page-size="pagesize"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>

        <div class="footer-ok">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="handSoft">启 动</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "copySoft",
  data() {
    return {
      // 分页
      pagesize: 3, // 每页条数
      currentPage: 1, //  默认开始页面
      dialogVisible1: false,
      tableData: [
        {
          address: "192.168.201.2",
          name: "huawei",
          ram: "32G",
          occupancy: "18%",
          describe: "计算机描述*****************",
        },
        {
          address: "192.168.201.2",
          name: "huawei",
          ram: "32G",
          occupancy: "36%",
          describe: "计算机描述*****************",
        },
        {
          address: "192.168.201.2",
          name: "huawei",
          ram: "32G",
          occupancy: "57%",
          describe: "计算机描述*****************",
        },
        {
          address: "192.168.201.2",
          name: "huawei",
          ram: "32G",
          occupancy: "78%",
          describe: "计算机描述*****************",
        },
        {
          address: "192.168.201.2",
          name: "huawei",
          ram: "32G",
          occupancy: "92%",
          describe: "计算机描述*****************",
        },
        {
          address: "192.168.201.2",
          name: "huawei",
          ram: "32G",
          occupancy: "18%",
          describe: "计算机描述*****************",
        },
        {
          address: "192.168.201.2",
          name: "huawei",
          ram: "32G",
          occupancy: "45%",
          describe: "计算机描述*****************",
        },
      ],
      multipleSelection: [],
    };
  },
  computed: {
    randomColor() {
      return (occupancy) => {
        if (0 <= parseFloat(occupancy) && parseFloat(occupancy) < 20) {
          return { color: "#409EFF" };
        } else if (20 <= parseFloat(occupancy) && parseFloat(occupancy) < 40) {
          return { color: "#67C23A" };
        } else if (40 <= parseFloat(occupancy) && parseFloat(occupancy) < 60) {
          return { color: "#E6A23C" };
        } else if (60 <= parseFloat(occupancy) && parseFloat(occupancy) < 80) {
          return { color: "#F56C6C" };
        } else if (
          80 <= parseFloat(occupancy) &&
          parseFloat(occupancy) <= 100
        ) {
          return { color: "red" };
        }
      };
    },
  },
  methods: {
    // 分页,点击切换
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 获取当前某一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.dialogVisible1 = false;
    },
    handSoft(done) {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请至少选择一条",
          duration: 3000,
        });
      } else {
        console.log(this.multipleSelection);
        this.$confirm("确认启动？")
          .then((_) => {
            this.dialogVisible1 = false;
          })
          .catch((_) => {});
      }
    },
  },
};
</script>
<style scoped lang="less">
.container /deep/ .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}
.container /deep/ .el-dialog__body {
  // background: red;
  padding: 0px 20px;
}
.container /deep/ .el-dialog__footer {
  border-top: 1px solid #ebebeb;
  padding-top: 20px;
}
.footer-ok {
  display: inline-block;
  margin-left: 30px;
}
.footer-fy {
  display: inline-block;
}
</style>
    

第二步：在父组件进行注册、引入和调用

模块中，调用

<CopySoft ref="dialog1" />

 <el-button
    @click="copy()"
    type="warning"
    size="small"
    v-if="scope.row.code && !scope.row.children"
    ><i class="el-icon-document-copy"></i>复制
</el-button>

引入

import CopySoft from "./copySoft";

dialogVisible1: false,

注册和使用

  components: {
    CopySoft,
  },
  methods: {
    copy() {
      // console.log(this.$refs.dialog)
      this.$refs.dialog1.dialogVisible1 = !this.$refs.dialog2.dialogVisible1;
    },
  },

备注

1、插槽

  <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

2、

01-动态绑定样式

<el-table-column label="计算机负载">
            <template slot-scope="scope">
              <span :style="randomColor(scope.row.occupancy)">{{
                scope.row.occupancy
              }}</span>
            </template>
          </el-table-column>

02-计算属性

  computed: {
    randomColor() {
      return (occupancy) => {
        if (0 <= parseFloat(occupancy) && parseFloat(occupancy) < 20) {
          return { color: "#409EFF" };
        } else if (20 <= parseFloat(occupancy) && parseFloat(occupancy) < 40) {
          return { color: "#67C23A" };
        } else if (40 <= parseFloat(occupancy) && parseFloat(occupancy) < 60) {
          return { color: "#E6A23C" };
        } else if (60 <= parseFloat(occupancy) && parseFloat(occupancy) < 80) {
          return { color: "#F56C6C" };
        } else if (
          80 <= parseFloat(occupancy) &&
          parseFloat(occupancy) <= 100
        ) {
          return { color: "red" };
        }
      };
    },
  }