From 22c5df5a5a210ca487c7c40e20e576153e96d2e7 Mon Sep 17 00:00:00 2001
From: jiangweiguo <1578967617@qq.com>
Date: Tue, 15 Oct 2024 17:48:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=86=E7=A0=81=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/DataSource/view/SqlServer.vue | 687 ++++++++++++++++--------
 1 file changed, 471 insertions(+), 216 deletions(-)

diff --git a/src/views/DataSource/view/SqlServer.vue b/src/views/DataSource/view/SqlServer.vue
index 780dd3e..8df7d94 100644
--- a/src/views/DataSource/view/SqlServer.vue
+++ b/src/views/DataSource/view/SqlServer.vue
@@ -1,76 +1,121 @@
 <template>
   <!-- Excel类型数据源 -->
-      <div class="datalink_mysql">
-        <div class="head"><span>{{dataLinkInfo.name}}(<em>类型：SqlServer</em>)</span></div>
-        <div class="title">
-          <span>基本信息</span><em></em>
-        </div>
-        <div class="base_info">
-          <ul>
-            <li>
-              <div class="label">数据源名称：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.name" @blur="editDataLink" placeholder="请输入数据源名称"></el-input>
-            </li>
-            <li>
-              <div class="label">服务器：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.host" @blur="editDataLink" placeholder=""></el-input>
-            </li>
-            <li>
-              <div class="label">端口：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.port" @blur="editDataLink" placeholder=""></el-input>
-            </li>
-            <li>
-              <div class="label">数据库：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.default_database" @blur="editDataLink" placeholder=""></el-input>
-            </li>
-            <li>
-              <div class="label">用户名：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.username" @blur="editDataLink" placeholder=""></el-input>
-            </li>
-            <li>
-              <div class="label">密码：</div>
-              <el-input class="inp_1" v-model="dataLinkInfo.password" @blur="editDataLink" placeholder=""></el-input>
-            </li>
-            <li>
-              <div class="label"></div>
+  <div class="datalink_mysql">
+    <div class="head">
+      <span>{{ dataLinkInfo.name }}(<em>类型：SqlServer</em>)</span>
+    </div>
+    <div class="title"><span>基本信息</span><em></em></div>
+    <div class="base_info">
+      <ul>
+        <li>
+          <div class="label">数据源名称：</div>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.name"
+            @blur="editDataLink"
+            placeholder="请输入数据源名称"
+          ></el-input>
+        </li>
+        <li>
+          <div class="label">服务器：</div>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.host"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
+        </li>
+        <li>
+          <div class="label">端口：</div>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.port"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
+        </li>
+        <li>
+          <div class="label">数据库：</div>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.default_database"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
+        </li>
+        <li>
+          <div class="label">用户名：</div>
+          <el-input
+            class="inp_1"
+            v-model="dataLinkInfo.username"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
+        </li>
+        <li>
+          <div class="label">密码：</div>
+          <el-input
+            class="inp_1"
+            type="password"
+            show-password
+            v-model="dataLinkInfo.password"
+            @blur="editDataLink"
+            placeholder=""
+          ></el-input>
+        </li>
+        <li>
+          <div class="label"></div>
 
-            <el-button size="small" type="primary" @click="testLink">{{testLinkText}}</el-button>
-            </li>
-          </ul>
-        </div>
-        <div class="title">
-          <span>表信息</span><em></em>
-        </div>
-        <div class="table_search">
-            <div class="label">筛选：</div>
-            <el-input class="inp_1" prefix-icon="el-icon-search" v-model="input" placeholder="输入关键字筛选"></el-input>
-        </div>
-        <el-table
-            :data="tableData.filter(data => !input || data.table_text.toLowerCase().includes(input.toLowerCase()))"
-            class="table_list"
-            highlight-current-row="true"
-            :empty-text="emptyext"
-            border
-            style="width: 100%">
-            <el-table-column
-            prop="table_text"
-            label="表名称"
-            align="center"
-            >
-            </el-table-column>
-            <el-table-column
-            prop="action"
-            label="操作"
-            align="center"
-            >
-            <template #default="scope">
-                <el-button @click="ShowData(scope.row.table_name,scope.row.table_text)" type="text" size="small">数据预览</el-button>
-            </template>
-            </el-table-column>
-        </el-table>
-      </div>
-      <!-- 数据预览 -->
-      <show-data ref="ShowData1" :tableName="showTableName" :tableText="showTableText" />
+          <el-button size="small" type="primary" @click="testLink">{{
+            testLinkText
+          }}</el-button>
+        </li>
+      </ul>
+    </div>
+    <div class="title"><span>表信息</span><em></em></div>
+    <div class="table_search">
+      <div class="label">筛选：</div>
+      <el-input
+        class="inp_1"
+        prefix-icon="el-icon-search"
+        v-model="input"
+        placeholder="输入关键字筛选"
+      ></el-input>
+    </div>
+    <el-table
+      :data="
+        tableData.filter(
+          (data) =>
+            !input ||
+            data.table_text.toLowerCase().includes(input.toLowerCase())
+        )
+      "
+      class="table_list"
+      highlight-current-row="true"
+      :empty-text="emptyext"
+      border
+      style="width: 100%"
+    >
+      <el-table-column prop="table_text" label="表名称" align="center">
+      </el-table-column>
+      <el-table-column prop="action" label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            @click="ShowData(scope.row.table_name, scope.row.table_text)"
+            type="text"
+            size="small"
+            >数据预览</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <!-- 数据预览 -->
+  <show-data
+    ref="ShowData1"
+    :tableName="showTableName"
+    :tableText="showTableText"
+  />
 </template>
 
 <script>
@@ -85,173 +130,383 @@ export default {
   components: {
     ShowData
   },
-  data(){
+  data() {
     return {
-      name:"",
-      dataLinkInfo:{},//数据连接基本信息
-      input:"",
-      testLinkText:"测试数据连接",//测试连接文字
-      testLineOK:true,//测试连接开关按钮
-      emptyext:"暂无数据",
-      tableData: [],//数据源下所有的表
-      showTableName:"",//需要预览的表的表名
-      showTableText:"",//需要预览的表的表名
-      
+      name: '',
+      dataLinkInfo: {}, //数据连接基本信息
+      input: '',
+      testLinkText: '测试数据连接', //测试连接文字
+      testLineOK: true, //测试连接开关按钮
+      emptyext: '暂无数据',
+      tableData: [], //数据源下所有的表
+      showTableName: '', //需要预览的表的表名
+      showTableText: '' //需要预览的表的表名
     }
   },
-  mounted(){
+  mounted() {
     //加载数据连接基本信息
-	  this.getDataLinkInfo();
-    this.getTables();
+    this.getDataLinkInfo()
+    this.getTables()
   },
   methods: {
-      //数据预览
-      ShowData(tableName,tableText){
-          if(!tableName){
-              return false;
-          }
-          this.showTableName=tableName;
-          this.showTableText=tableText;
-          this.$refs['ShowData1'].onOpen();
-      },
-      //加载数据连接基本信息
-      async getDataLinkInfo(){
-		//   alert(12)
-		  var dataLinkId=this.$route.query.dataLinkId;
-          const res =await axios({url:'dataLink/getDataLink',params:{data_link_id:dataLinkId}, method: 'get'});
-          // console.log("res",res);
-          //成功
-          if(res.code==1){
-            this.dataLinkInfo=res.data;
-          }else{
-            // ElMessage(res.message);
-            this.$message({ type: 'error', message:res.message});
-          }
-      },
-      //测试数据连接
-      async testLink(){
-            if(!this.testLineOK){
-                ElMessage("正在测试中...请等待测试结果！");
-                return false;
-            }
-            this.testLineOK=false;
-            this.testLinkText="连接中.....";
-            var dataLinkId=this.$route.query.dataLinkId;
-            const res =await axios({url:'dataLink/testLink',params:{data_link_id:dataLinkId}, method: 'get'});
-            //成功
-            if(res.code==1){
-                if(res.data){
-                    // ElMessage("测试连接成功！");
-                    this.$message({ type: 'success', message:"测试连接成功！"});
-                    this.getTables();//测试成功，重载表信息
-                }else{
-                    // ElMessage("测试连接失败！");
-                    this.$message({ type: 'error', message:"测试连接失败！"});
-                }
-            }else{
-                // ElMessage(res.message);
-                this.$message({ type: 'error', message:res.message});
-                // this.emptyext=res.message;
-            }
-            //无论成功与否，都还原为之前的状态
-            this.testLineOK=true;
-            this.testLinkText="测试数据连接";
-      },
-      //加载表信息
-      async getTables(){
-		  var dataLinkId=this.$route.query.dataLinkId;
-          const res =await axios({url:'dataLink/getTables',params:{data_link_id:dataLinkId}, method: 'get'});
-          //当请求的数据源连接id不一致时，说明已经切换数据源，需要拦截之前已经请求过的数据链id，不做任何处理
-          if(dataLinkId != this.$route.query.dataLinkId){
-            return false;
-          }
-          //成功
-          if(res.code==1){
-            this.tableData=res.data;
-          }else{
-            // ElMessage(res.message);
-            this.tableData=[];
-            // this.emptyext=res.message;
-          }
-      },
-      async editDataLink(){
-          const res =await axios({url:'dataLink/editDataLink',data:this.dataLinkInfo, method: 'post'});
-          // console.log("res",res);
-          //成功
-          if(res.code!=1){
-            // this.dataLinkInfo=res.data;
-            // ElMessage(res.message);
-            this.$message({ type: 'error', message:res.message});
-          }
-          this.$emit("getGroupList");
+    //数据预览
+    ShowData(tableName, tableText) {
+      if (!tableName) {
+        return false
+      }
+      this.showTableName = tableName
+      this.showTableText = tableText
+      this.$refs['ShowData1'].onOpen()
+    },
+    //加载数据连接基本信息
+    async getDataLinkInfo() {
+      //   alert(12)
+      var dataLinkId = this.$route.query.dataLinkId
+      const res = await axios({
+        url: 'dataLink/getDataLink',
+        params: { data_link_id: dataLinkId },
+        method: 'get'
+      })
+      // console.log("res",res);
+      //成功
+      if (res.code == 1) {
+        this.dataLinkInfo = res.data
+      } else {
+        // ElMessage(res.message);
+        this.$message({ type: 'error', message: res.message })
+      }
+    },
+    //测试数据连接
+    async testLink() {
+      if (!this.testLineOK) {
+        ElMessage('正在测试中...请等待测试结果！')
+        return false
+      }
+      this.testLineOK = false
+      this.testLinkText = '连接中.....'
+      var dataLinkId = this.$route.query.dataLinkId
+      const res = await axios({
+        url: 'dataLink/testLink',
+        params: { data_link_id: dataLinkId },
+        method: 'get'
+      })
+      //成功
+      if (res.code == 1) {
+        if (res.data) {
+          // ElMessage("测试连接成功！");
+          this.$message({ type: 'success', message: '测试连接成功！' })
+          this.getTables() //测试成功，重载表信息
+        } else {
+          // ElMessage("测试连接失败！");
+          this.$message({ type: 'error', message: '测试连接失败！' })
+        }
+      } else {
+        // ElMessage(res.message);
+        this.$message({ type: 'error', message: res.message })
+        // this.emptyext=res.message;
+      }
+      //无论成功与否，都还原为之前的状态
+      this.testLineOK = true
+      this.testLinkText = '测试数据连接'
+    },
+    //加载表信息
+    async getTables() {
+      var dataLinkId = this.$route.query.dataLinkId
+      const res = await axios({
+        url: 'dataLink/getTables',
+        params: { data_link_id: dataLinkId },
+        method: 'get'
+      })
+      //当请求的数据源连接id不一致时，说明已经切换数据源，需要拦截之前已经请求过的数据链id，不做任何处理
+      if (dataLinkId != this.$route.query.dataLinkId) {
+        return false
+      }
+      //成功
+      if (res.code == 1) {
+        this.tableData = res.data
+      } else {
+        // ElMessage(res.message);
+        this.tableData = []
+        // this.emptyext=res.message;
       }
+    },
+    async editDataLink() {
+      const res = await axios({
+        url: 'dataLink/editDataLink',
+        data: this.dataLinkInfo,
+        method: 'post'
+      })
+      // console.log("res",res);
+      //成功
+      if (res.code != 1) {
+        // this.dataLinkInfo=res.data;
+        // ElMessage(res.message);
+        this.$message({ type: 'error', message: res.message })
+      }
+      this.$emit('getGroupList')
+    }
   },
-	watch: {
-		'$route' (to, from) {
-			//加载数据连接基本信息
-			// this.getDataLinkInfo();
+  watch: {
+    $route(to, from) {
       //加载数据连接基本信息
-			if(to.path=="/dataSource/sqlserver"){
-        this.tableData=[];
-				this.getDataLinkInfo();
-                this.getTables();
-			}
-		}
-	}
+      // this.getDataLinkInfo();
+      //加载数据连接基本信息
+      if (to.path == '/dataSource/sqlserver') {
+        this.tableData = []
+        this.getDataLinkInfo()
+        this.getTables()
+      }
+    }
+  }
 }
 </script>
 
-<style  lang="scss">
+<style lang="scss">
 //excel数据源
-.datalink_mysql{ width: 100%; overflow: hidden;}
-.datalink_mysql .head{ width:100%; border-bottom: #101419 1px solid; height: 42px; overflow: hidden; padding: 0 0 14px 0;}
-.datalink_mysql .head span{ display: block; height: 24px; border-left: #2681ff 2px solid; margin: 9px 0 0 2px; padding: 0 0 0 15px; font-size: 16px; color: #ddd;}
-.datalink_mysql .head span em{ color: #2681ff;}
-.datalink_mysql .title{ width: 100%; height: 32px; background: #2c2f40; margin: 30px 0 0 0; overflow: hidden;}
-.datalink_mysql .title span{ width: 104px; height: 32px; float: left; line-height: 32px; text-indent: 20px; color: #fff; background: #2681ff; font-size: 14px;}
-.datalink_mysql .title em{ float: left;width:0; height:0;border-top:16px solid transparent;border-bottom: 16px solid transparent;border-left: 16px solid #2681ff;}
-.datalink_mysql .base_info{ width: 100%;}
-.datalink_mysql .base_info ul{margin: 20px 0 0 20px; overflow: hidden; padding: 0 0 20px 0;}
-.datalink_mysql .base_info ul li{ overflow: hidden; height: 36px; margin: 20px 0 0 0;}
-.datalink_mysql .base_info ul li .label{ float: left; width: 112px; height: 34px; line-height: 34px; text-align: right; color: #666666; font-size: 14px; font-weight: 700; margin: 0 5px 0 0;}
+.datalink_mysql {
+  width: 100%;
+  overflow: hidden;
+}
+.datalink_mysql .head {
+  width: 100%;
+  border-bottom: #101419 1px solid;
+  height: 42px;
+  overflow: hidden;
+  padding: 0 0 14px 0;
+}
+.datalink_mysql .head span {
+  display: block;
+  height: 24px;
+  border-left: #2681ff 2px solid;
+  margin: 9px 0 0 2px;
+  padding: 0 0 0 15px;
+  font-size: 16px;
+  color: #ddd;
+}
+.datalink_mysql .head span em {
+  color: #2681ff;
+}
+.datalink_mysql .title {
+  width: 100%;
+  height: 32px;
+  background: #2c2f40;
+  margin: 30px 0 0 0;
+  overflow: hidden;
+}
+.datalink_mysql .title span {
+  width: 104px;
+  height: 32px;
+  float: left;
+  line-height: 32px;
+  text-indent: 20px;
+  color: #fff;
+  background: #2681ff;
+  font-size: 14px;
+}
+.datalink_mysql .title em {
+  float: left;
+  width: 0;
+  height: 0;
+  border-top: 16px solid transparent;
+  border-bottom: 16px solid transparent;
+  border-left: 16px solid #2681ff;
+}
+.datalink_mysql .base_info {
+  width: 100%;
+}
+.datalink_mysql .base_info ul {
+  margin: 20px 0 0 20px;
+  overflow: hidden;
+  padding: 0 0 20px 0;
+}
+.datalink_mysql .base_info ul li {
+  overflow: hidden;
+  height: 36px;
+  margin: 20px 0 0 0;
+}
+.datalink_mysql .base_info ul li .label {
+  float: left;
+  width: 112px;
+  height: 34px;
+  line-height: 34px;
+  text-align: right;
+  color: #666666;
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 5px 0 0;
+}
 //element-ui 输入框
-.datalink_mysql .base_info .inp_1.el-input{ float: left; width: 435px;}
-.datalink_mysql .base_info .inp_1.el-input .el-input__inner{ float: left; width: 425px; height: 32px; margin: 0px 0 0 0; background-color: #0f1217; border-radius: 0; border: #3c465a 1px solid; padding: 0 0 0 14px; font-size: 14px;color: #ddd; }
-.datalink_mysql .base_info .inp_1.el-input .el-input__inner::placeholder{ color: #333;}
-.datalink_mysql .base_info .inp_1.el-input .el-input__inner:focus{ border: #2681ff 1px solid;}
+.datalink_mysql .base_info .inp_1.el-input {
+  float: left;
+  width: 435px;
+}
+.datalink_mysql .base_info .inp_1.el-input .el-input__inner {
+  float: left;
+  width: 425px;
+  height: 32px;
+  margin: 0px 0 0 0;
+  background-color: #0f1217;
+  border-radius: 0;
+  border: #3c465a 1px solid;
+  padding: 0 0 0 14px;
+  font-size: 14px;
+  color: #ddd;
+}
+.datalink_mysql .base_info .inp_1.el-input .el-input__inner::placeholder {
+  color: #333;
+}
+.datalink_mysql .base_info .inp_1.el-input .el-input__inner:focus {
+  border: #2681ff 1px solid;
+}
 
-.datalink_mysql .base_info ul li .file{ float: left; height: 34px; line-height: 34px; color: #666666; font-size: 14px;}
-.datalink_mysql .base_info ul li .moban{ float: left; height: 34px; line-height: 34px; color: #666666; font-size: 14px;}
-.datalink_mysql .base_info ul li .moban a{ color: #1856ad; text-decoration: underline; margin: 0 0 0 15px;}
-.datalink_mysql .base_info ul li .moban a:hover{ color: #2270dd;}
+.datalink_mysql .base_info ul li .file {
+  float: left;
+  height: 34px;
+  line-height: 34px;
+  color: #666666;
+  font-size: 14px;
+}
+.datalink_mysql .base_info ul li .moban {
+  float: left;
+  height: 34px;
+  line-height: 34px;
+  color: #666666;
+  font-size: 14px;
+}
+.datalink_mysql .base_info ul li .moban a {
+  color: #1856ad;
+  text-decoration: underline;
+  margin: 0 0 0 15px;
+}
+.datalink_mysql .base_info ul li .moban a:hover {
+  color: #2270dd;
+}
 
 //element-ui 文件上传 按钮
 // .datalink_mysql .base_info ul li{ float: left;}
-.datalink_mysql .base_info ul li .el-button{ border: #2681ff 1px solid; color:#2681ff ; border-radius: 0; background: none; padding: 0; width: 423px; height: 32px;}
-.datalink_mysql .base_info ul li .el-button:hover{ border: #4794ff 1px solid; color: #4794ff;}
-.datalink_mysql .base_info ul li .el-button:active{ border: #145dc2 1px solid; color: #145dc2;}
+.datalink_mysql .base_info ul li .el-button {
+  border: #2681ff 1px solid;
+  color: #2681ff;
+  border-radius: 0;
+  background: none;
+  padding: 0;
+  width: 423px;
+  height: 32px;
+}
+.datalink_mysql .base_info ul li .el-button:hover {
+  border: #4794ff 1px solid;
+  color: #4794ff;
+}
+.datalink_mysql .base_info ul li .el-button:active {
+  border: #145dc2 1px solid;
+  color: #145dc2;
+}
 
-.table_search{ width: 100%; overflow: hidden; height: 38px; margin: 25px 0 0 0;}
-.table_search .label{ float: left; width: 50px; height: 34px; line-height: 34px; text-align: right; color: #666666; font-size: 14px; margin: 0 0 0 15px; font-weight: 700; margin: 0 5px 0 0;}
+.table_search {
+  width: 100%;
+  overflow: hidden;
+  height: 38px;
+  margin: 25px 0 0 0;
+}
+.table_search .label {
+  float: left;
+  width: 50px;
+  height: 34px;
+  line-height: 34px;
+  text-align: right;
+  color: #666666;
+  font-size: 14px;
+  margin: 0 0 0 15px;
+  font-weight: 700;
+  margin: 0 5px 0 0;
+}
 //element-ui 输入框
-.table_search .inp_1.el-input{ float: left; width: 435px;}
-.table_search .inp_1.el-input .el-input__inner{ float: left; width: 248px; height: 32px; margin: 0px 0 0 0; background-color: #0f1217; border-radius: 0; border: #3c465a 1px solid; padding: 0 0 0 28px; font-size: 14px;color: #ddd; }
-.table_search .inp_1.el-input .el-input__inner::placeholder{ color: #333;}
-.table_search .inp_1.el-input .el-icon-search{ font-size: 14px; color: #666; line-height: 30px;}
+.table_search .inp_1.el-input {
+  float: left;
+  width: 435px;
+}
+.table_search .inp_1.el-input .el-input__inner {
+  float: left;
+  width: 248px;
+  height: 32px;
+  margin: 0px 0 0 0;
+  background-color: #0f1217;
+  border-radius: 0;
+  border: #3c465a 1px solid;
+  padding: 0 0 0 28px;
+  font-size: 14px;
+  color: #ddd;
+}
+.table_search .inp_1.el-input .el-input__inner::placeholder {
+  color: #333;
+}
+.table_search .inp_1.el-input .el-icon-search {
+  font-size: 14px;
+  color: #666;
+  line-height: 30px;
+}
 
 //element-ui 表格
-.table_list{ background: none; border: 1px solid #27343e; margin: 15px 0 0 0;}
-.table_list tr{ background: none;}
-.table_list tr th{ background: none;border-right: 1px solid #27343e; border-bottom: 1px solid #27343e; padding: 6px 0; color: #aaaaaa; font-size: 14px;}
-.table_list tr td{ background: none;border-right: 1px solid #27343e; border-bottom: 1px solid #27343e; padding: 2px 0; color: #ccc; font-size: 12px;}
-.table_list.el-table td, .table_list.el-table th.is-leaf{border-bottom: 1px solid #27343e;}
-.table_list.el-table--border::after, .table_list.el-table--group::after, .table_list.el-table::before{background:none;}
-.table_list .el-table__body tr.current-row>td{ background-color: #23272d;}
-.table_list .el-table__body tr:hover>td{ background-color: #23272d;}
+.table_list {
+  background: none;
+  border: 1px solid #27343e;
+  margin: 15px 0 0 0;
+}
+.table_list tr {
+  background: none;
+}
+.table_list tr th {
+  background: none;
+  border-right: 1px solid #27343e;
+  border-bottom: 1px solid #27343e;
+  padding: 6px 0;
+  color: #aaaaaa;
+  font-size: 14px;
+}
+.table_list tr td {
+  background: none;
+  border-right: 1px solid #27343e;
+  border-bottom: 1px solid #27343e;
+  padding: 2px 0;
+  color: #ccc;
+  font-size: 12px;
+}
+.table_list.el-table td,
+.table_list.el-table th.is-leaf {
+  border-bottom: 1px solid #27343e;
+}
+.table_list.el-table--border::after,
+.table_list.el-table--group::after,
+.table_list.el-table::before {
+  background: none;
+}
+.table_list .el-table__body tr.current-row > td {
+  background-color: #23272d;
+}
+.table_list .el-table__body tr:hover > td {
+  background-color: #23272d;
+}
 //element-ui 表格--按钮
-.table_list .el-button{ /*border: #2681ff 1px solid;*/border:none; color:#2681ff ; border-radius: 0; background: none; padding: 0; width: 60px; height: 22px; margin: 5px 0; font-size: 12px;}
-.table_list .el-button:hover{ /*border: #4794ff 1px solid;*/border:none; color: #4794ff;}
-.table_list .el-button:active{ /*border: #145dc2 1px solid;*/border:none; color: #145dc2;}
+.table_list .el-button {
+  /*border: #2681ff 1px solid;*/
+  border: none;
+  color: #2681ff;
+  border-radius: 0;
+  background: none;
+  padding: 0;
+  width: 60px;
+  height: 22px;
+  margin: 5px 0;
+  font-size: 12px;
+}
+.table_list .el-button:hover {
+  /*border: #4794ff 1px solid;*/
+  border: none;
+  color: #4794ff;
+}
+.table_list .el-button:active {
+  /*border: #145dc2 1px solid;*/
+  border: none;
+  color: #145dc2;
+}
 </style>
-
-