el-table表格中添加单选框及打开新页面

一、效果图

二、主要代码

 <el-dialog title="选择" :visible.sync="dialogTableVisible" class="classAddDialog">
      <el-table :data="form.sourcesByTitle"  border style="width: 800px" 
    >
        <el-table-column property="id" label="" min-width="80">
        <template slot-scope="scope">
          <el-radio v-model="radioSelect" :label="scope.row.id" @change.native.stop="(e) => handleRadioChange(e, scope.row)">&nbsp;</el-radio>
        </template>
        </el-table-column>
        <el-table-column property="title" label="公告名称" min-width="120"></el-table-column>
        <el-table-column property="url" label="原文链接" min-width="120" >
           <template slot-scope="{ row }">
               <span @click="openUrl(row.url)">{{row.url}}</span>
            </template>
        </el-table-column>
        <el-table-column property="webSource" label="来源" min-width="120"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmRadio">确 定</el-button>
      </div>
    </el-dialog>

 dialogTableVisible:false,
 radioSelect:'',
 currentRow :{},
 //********************
 openUrl(url){
      window.open(url, "_blank");
  },
 handleRadioChange(e, row) {
      e.stopPropagation();
      this.currentRow = Object.assign({}, row);
   },

三级目录

链接: https://www.jianshu.com/p/e140e5a8490f.