myWriteCodeReview

1.使用插槽在tsx中的写法

//表格中的插槽使用
//在表格的一项中使用插槽tooltip并改变tooltip提示样式
 <el-table>
  <el-table-column label="插槽" prop="xxx" show-overflow-tooltip align="center"
    v-slots={{
      default:(scope:any) => {
       return(
        <tooltip
         placement="top"
         effect="light"
         popper-class="popper-custom"
         v-slots={{
          content:()=>{
           return(
            <p style="max-width:500px">
             {scope.row.xxx}
            </p>
           )
          }
         }}
        >
        <span>{scope.row.xxx}</span>
        </tooltip>
       )
      }
    }}
  />
 </el-table>

//表格内嵌套表格使用插槽 注意不写row-key无法展开
<el-table onExpandChange={xxx} row-key="name">
//展开的表格属性需要写上type="expand" row.list为请求回来的数据 表格操作才是重点但是好像还不是很明白
   <el-table-column
    type="expand"
    v-slots={{
     default:(parentScope:any) =>{
      return(
       <div style={{padding:'20px 40px'}}>
        <table border data={parentScope.row.list} 
         highlight-current-row
          > 
          <el-table-column prop="" lable="">
          </el-table-column>
          <el-table-column prop="" lable="操作">
          </el-table-column>
        </table>
       </div>
      )
     }
    }}
   >
   </el-table-column>
   <el-table-column label="操作">
   </el-table-column>
</el-table>

2.路由跳转

//可以用router,go(-1)或router.go(1)来实现页面的跳转
     <el-button
      type="primary"
      onClikc={():void=>{
       router.go(-1)
      }}
     >
     </el-button>

路由可以通过parmas加name进行跳转也可以通过path加query跳转

 router.push({
  path:'/xxx',
  query:{}
 })
 router.push({
   name:'xxx',
   params:{}
 })

3.echarts在tsx中的写法

 setup(props, {emit}){
  const chart = ref(null)
  const initEchart = () => {
      if (!chart.value) {
        const dom: any = chartRef.value //通过ref拿取
        chart.value = markRaw(echarts.init(dom))
        chart.value.on('click', (params: any) => {
          if (params.componentSubType == 'bar') {
            emit('chartClick', 'bar', params.data)
          }
        })
      }
    }
  chart.value.setOption(option)
  chaet.value.clear()
 }

4.一些bug问题

 有遇到过在本地没问题在其他环境报错null的，是因为插槽row没有值导致的
 有遇到过表格一直发请求崩溃的~是因为展开表格赋值问题没有.value
 有遇到表格使用插槽点不开的的没有设置row-key
 又遇到过传参回来echarts不更新的因为没有echart.clear()