1、页面能运行出界面，但是不显示数据，如图
 
 
2、这时首先检查数据库连接字符串
 在src\main\resources\dbconfig.properties 修改好连接字符串一般都可以出现数据
 
 
3、若是仍然不出现数据，可以尝试清除下缓存：关闭浏览器、remove、clean
 
 4、以上措施如果还不行，有可能是mysqljar包版本不一致引起，console一般会提示Unknown system variable ‘query_cache_size’
 。这时需要修改连接字符串,将
 jdbc.jdbcUrl=jdbc:mysql://localhost:3306/ssm_crud
 修改成
 jdbc.jdbcUrl=jdbc:mysql://localhost:3306/ssm_crud?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC

如果console.log()中写入字符串连接，则是以黄色框显示（不显示具体数据），否则是以红色框数据形式显示。

 
文章目录
 
需求
官网说明
实现效果
具体步骤
附加需求：调节穿梭框高宽度
  
 

 
 
需求
 
穿梭框中显示的内容是包含多个字段的数据（把表格的几个字段在穿梭框中展示）以及修改相应的样式，查看 Element UI 官网 不足以满足我们的需求，根据需求我们自定义实现穿梭框。
 
官网说明
 
官网提供了基础的穿梭框，和自定义在搜索条件的穿梭框，但是都是显示一个字段值。
 
 
自定义数据项，除了基本的el-transfer使用方法，还需要使用Scoped Slot。
 
 
实现效果
 

 支持查询条件，显示多个字段数据的穿梭框；数据中间用---分割区分。
 
具体步骤
 
这是我们从数据库查询出来的数据，主要展示我红色框圈起来的三个字段。
 
 
代码实现的效果：代码只展示穿梭框的内容
 
<el-transfer v-model="checked" :data="transferData" filterable
             filter-placeholder="请输入规则名称"
            :titles="['未选中规则', '选中规则']" @change="getObject">
  <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}
    <span> ---- {{ option.ruleDesc }}</span>
  </span>
</el-transfer>
 
<script>
import { getSelectList } from '@/api/reqm/reqmdocchkrule'

export default {
  name: 'reqmdocchkrulealc',
  data() {
    return {
  	  // 穿梭框左侧的数据
      transferData: [],
      // 穿梭框绑定的数据，选定到右侧框中的数据项的value组成的数组
      checked: [],
    }
  },
  create() {
    this.getList()
  },
  methods: {
    // 查询列表数据
    getList() {
      getSelectList(this.queryParams).then(response => {
        if (response.data != null){
          // 有数据
          const allData = response.data
          const data = []
          for(let i = 0; i < allData.length; i++) {
            data.push({
              key: allData[i].ruleCod,
              label: allData[i].ruleNam,
              ruleDesc: allData[i].ruleDesc,
            })
          }
          this.transferData = data
        }else {
          // 无数据
        }
      }).catch(() => {
      })
    },
    // 右侧列表元素变化时触发
    getObject(value, direction, movedKeys) {
      console.log(value, direction, movedKeys, '********')
      console.log('选中的数据有:' + this.checked)
    },
  }
}
</script>
 
改变穿梭框中间移动的位置，如下代码是将按钮放在正中间：
 
style="text-align: left; display: inline-block"
 
穿梭框内容显示不全解决方法：
 
加上这个属性:render-content="renderFunc"
 
在 data 中定义即可：
 
renderFunc(h,option){
  return <span title={option.label}>{option.label}</span>
},
 
附加需求：调节穿梭框高宽度
 
由于我们显示的字段是比较长的内容，官网提供的大小不足以满足我们需求，所以想要把穿梭框的大小变大，具体实现如下：
 
<style scoped lang="less">
  /* 穿梭框外框高宽度 */
  /deep/ .el-transfer-panel{
    width: 600px;
    height: 400px;
  }
  /* 穿梭框内部展示列表的高宽度 */
  /deep/ .el-transfer-panel__list{
    height: 375px;
  }
</style>
 
效果图在文章开始已经展示了，这里就不重复展示。
 
想要带分页的穿梭框可以参考：传送门…
 
 
 如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。  

 
 创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客 

在进行vue-cli框架搭建的管理系统开发时.遇到浏览器控制台console打印结果与后台接口返回结果不一致的问题.
 经过本人多方测试.发现问题.现在分享出来.希望对各位小伙伴们有帮助.
 首先.直接在浏览器地址栏访问接口的结果
 
 其次.控制台打印的结果
 
 此时的js代码
 
$.ajax({
	'url':'http://127.0.0.1:8081/bus/selectBYID',
	'type':'get',
	'dataType':'json',
	'data':{
		'id':id
	},
	success:result => {
		let {data,list} = result;
		this.bus = data;
		this.items = list;
		console.log(result);
	}
});
 
可以发现start和night这两个字段的值发生了变化.后来发现删除
 
this.bus = data;
 
这行代码之后.控制台console打印的结果与浏览器地址栏的结果相同.最终发现原因在于使用view-design这个ui框架造成的原因.
 
start和night这两个字段是用来显示时间.由于框架需求的格式为
 
'HH:mm:ss'
 
而接口返回的数据格式为
 
'yyyy-MM-dd HH:mm:ss'
 
导致框架对这两个字段进行了内部的格式化.导致数据发生了变化.最终问题解决之后的代码
 
$.ajax({
	'url':'http://127.0.0.1:8081/bus/selectBYID',
	'type':'get',
	'dataType':'json',
	'data':{
		'id':id
	},
	success:result => {
		let {data,list} = result;
		/**
		 * 手动将数据的格式调整为ui框架需求的格式
		 * 即06:00:00这种格式
		 */
		data.start = data.start.substring(11,19);
		data.night = data.night.substring(11,19);
		
		this.bus = data;
		this.items = list;
		console.log(result);
	}
});
 
最后,如果各位小伙伴在使用ui框架的时候一定要小心 view-ui element-ui等等
 吐槽
 都是ui框架不好.数据格式不正确.你TMD报错就好了.把我的数据转换的乱七八糟是要干什么啊
 如果有其他类似的问题.欢迎私信