kol 新功能 col

src/components/yqrange/kol-manage.vue

@@ -10,7 +10,7 @@
             </el-radio-group>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="入口文案" prop="name">
             <el-input v-model="ruleForm.name" placeholder="请输入入口文案，最长6个字"></el-input>
           </el-form-item>
@@ -18,12 +18,14 @@
       </el-row>
       <el-row>
         <el-button type="primary">添加</el-button>
+        <span class="des">*说明：添加和移除kol后，需点击页面的保存按钮，方可生效</span>
       </el-row>
     </el-form>
     <el-row class="table-content">
       <el-table
         :data="tableData"
         border
+        id="kolTable"
         style="width: 100%"
       >
         <el-table-column
@@ -48,7 +50,7 @@
 
 <script>
 import Sortable from 'sortablejs';
-import kolCol from './util/common';
+import { kolCol } from './util/common';
 
 export default {
   components: {
@@ -69,7 +71,7 @@ export default {
           { max: 6, message: '入口文案长度不能多于6个字符', trigger: 'blur' }
         ]
       },
-      kolCol,
+      col: kolCol,
       tableData: [
         {
           index: 1
@@ -93,9 +95,8 @@ export default {
   },
   methods: {
     rowDrop() {
-      const tbody = document.querySelector('.el-table__body-wrapper tbody');
+      const tbody = document.querySelector('#kolTable tbody');
 
-      debugger
       Sortable.create(tbody);
     }
   },
@@ -103,6 +104,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.des {
+  font-size: 12px;
+  color: #777;
+  margin-left: 40px;
+}
 .table-content {
   margin-top: 15px;
 }